:root {
  --dark: #2f2f31;
  --darker: #050505;
  --light: #f4f4f3;
  --soft-blue: #eaf2f7;
  --white: #ffffff;
  --black: #0a0a0a;
  --muted: #77777a;
  --line: rgba(255, 255, 255, 0.17);
  --blue: #2f5df6;
  --orange: #ff805e;
  --radius-lg: 30px;
  --radius-pill: 999px;
  --container: 1320px;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  --font: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--light);
  color: var(--black);
  font-weight: 300;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }

.container {
  width: min(var(--container), calc(100% - 56px));
  margin: 0 auto;
}

/* Sticky global header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(47, 47, 49, 0.97);
  color: var(--white);
  backdrop-filter: blur(10px);
}

.site-header.is-black {
  background: rgba(5, 5, 5, 0.98);
}

.header-inner {
  min-height: 92px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid var(--line);
}

.brand {
  font-size: clamp(1.35rem, 2vw, 2.15rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
}

.nav-left, .nav-right {
  display: flex;
  align-items: center;
  gap: 34px;
  font-weight: 700;
  font-size: 1rem;
}

.nav-right { justify-content: flex-end; }
.nav-left a, .nav-right a { transition: opacity .2s ease; }
.nav-left a:hover, .nav-right a:hover, .nav-left a.active, .nav-right a.active { opacity: .72; }

.menu-toggle {
  display: none;
  justify-self: end;
  background: transparent;
  border: 0;
  color: var(--white);
  width: 44px;
  height: 44px;
  font-size: 1.75rem;
  cursor: pointer;
}

.mobile-menu {
  display: none;
  border-bottom: 1px solid var(--line);
  padding: 10px 0 22px;
}
.mobile-menu a {
  display: block;
  padding: 14px 0;
  font-weight: 600;
}
.mobile-menu.open { display: block; }

/* Shared atoms */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  min-height: 70px;
  border-radius: var(--radius-pill);
  border: 0;
  cursor: pointer;
  font-weight: 700;
  transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.16); }
.btn-light { background: var(--white); color: var(--black); }
.btn-dark { background: var(--dark); color: var(--white); min-width: 150px; min-height: 52px; }
.btn-blue { background: var(--blue); color: var(--white); }
.btn-orange { background: var(--orange); color: var(--white); min-width: 160px; min-height: 58px; }

.section-title {
  margin: 0;
  font-size: clamp(2.35rem, 4.2vw, 4.15rem);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.035em;
}
.section-title.small { font-size: clamp(2.1rem, 3.2vw, 3.35rem); }
.section-intro {
  max-width: 1080px;
  margin: 34px auto 0;
  font-size: clamp(1.08rem, 1.8vw, 1.55rem);
  line-height: 1.9;
  text-align: center;
}
.section-header {
  text-align: center;
  margin-bottom: 78px;
}
.underline {
  width: 66px;
  height: 4px;
  background: #898989;
  margin: 28px 0 36px;
}

/* Hero with optional video */
.hero-video {
  position: relative;
  min-height: calc(100vh - 92px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--darker);
  color: var(--white);
  text-align: center;
  overflow: hidden;
}
.hero-video video,
.hero-video .hero-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-video .hero-fallback {
  background: center/cover no-repeat;
}
.hero-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .64);
}
.hero-content {
  position: relative;
  z-index: 2;
  width: min(1120px, calc(100% - 40px));
  padding: 80px 0 56px;
}
.hero-content h1 {
  margin: 0;
  font-size: clamp(3.2rem, 6.2vw, 6.7rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.045em;
}
.hero-content p {
  max-width: 950px;
  margin: 42px auto 0;
  font-size: clamp(1.1rem, 1.7vw, 1.55rem);
  line-height: 1.85;
  color: rgba(255,255,255,.94);
}
.hero-content .btn { margin-top: 58px; }
.down-arrow {
  width: 36px;
  height: 36px;
  margin: 46px auto 0;
  border-right: 3px solid white;
  border-bottom: 3px solid white;
  transform: rotate(45deg);
  opacity: .96;
}

/* Home / about overlap */
.about-overlap {
  background: var(--dark);
  padding: 100px 0 130px;
  overflow: hidden;
}
.about-stage {
  position: relative;
  min-height: 610px;
}
.about-image {
  width: min(64%, 870px);
  height: 520px;
  margin-left: auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.about-image img { width: 100%; height: 100%; object-fit: cover; }
.about-card {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(50%, 720px);
  min-height: 410px;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 70px 66px;
  box-shadow: var(--shadow);
}
.about-card p {
  margin: 0;
  color: #343437;
  font-size: clamp(1.05rem, 1.45vw, 1.42rem);
  line-height: 1.9;
}

/* Services summary list */
.services-summary {
  background: var(--light);
  padding: 116px 0 126px;
}
.services-summary.soft { background: var(--soft-blue); }
.service-list {
  width: min(1080px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 64px;
}
.service-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 28px;
  align-items: start;
}
.service-icon {
  width: 78px;
  height: 78px;
  color: var(--black);
}
.service-row h3 {
  margin: 0 0 18px;
  font-size: clamp(1.45rem, 2vw, 2rem);
  line-height: 1.2;
  font-weight: 700;
}
.service-row p {
  margin: 0;
  font-size: clamp(1rem, 1.45vw, 1.28rem);
  line-height: 1.85;
}
.center-cta { text-align: center; margin-top: 70px; }

/* Portfolio cards */
.dark-band {
  background: var(--dark);
  color: var(--white);
}
.portfolio-section { padding: 108px 0 120px; }
.portfolio-section .section-intro, .dark-band .section-intro { color: rgba(255,255,255,.88); }
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
}
.image-card {
  min-height: 510px;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 38px rgba(0,0,0,.2);
  display: flex;
  align-items: flex-end;
  background: #111;
}
.image-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.72) 8%, rgba(0,0,0,.34) 55%, rgba(0,0,0,.08) 100%);
  z-index: 1;
}
.image-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.image-card-content { position: relative; z-index: 2; padding: 34px; }
.image-card h3 {
  margin: 0 0 12px;
  font-size: clamp(1.35rem, 2vw, 1.95rem);
  line-height: 1.15;
  font-weight: 800;
}
.image-card p { margin: 0; line-height: 1.8; font-size: .98rem; color: rgba(255,255,255,.96); }

/* Testimonials */
.testimonials { background: var(--light); padding: 110px 0 140px; }
.testimonial-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 78px 150px;
}
.testimonial p { margin: 0 0 20px; font-size: 1.05rem; line-height: 1.9; }
.testimonial strong { display: block; font-size: 1.2rem; font-weight: 700; }

/* Enquiry CTA */
.enquiry-cta-section {
  background: var(--dark);
  color: var(--white);
  padding: 116px 0 132px;
  text-align: center;
}
.enquiry-cta-section p {
  width: min(780px, 100%);
  margin: 28px auto 0;
  font-size: clamp(1.1rem, 1.7vw, 1.42rem);
  line-height: 1.85;
}
.enquiry-cta-section .btn { margin-top: 70px; }

/* About page */
.why-section {
  background: var(--light);
  padding: 125px 0 150px;
  text-align: center;
}
.why-grid {
  margin-top: 112px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 90px;
}
.why-item svg { width: 95px; height: 95px; margin: 0 auto 58px; stroke: var(--black); }
.why-item h3 { margin: 0 0 26px; font-size: clamp(1.75rem, 2.8vw, 2.65rem); line-height: 1.15; font-weight: 800; }
.why-item p { margin: 0; font-size: 1.15rem; line-height: 1.85; }

/* Services page */
.service-detail-section { background: var(--white); padding: 96px 0 120px; }
.service-detail-grid {
  width: min(1160px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 80px;
}
.service-detail {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 58px;
  align-items: center;
}
.service-detail:nth-child(even) .service-detail-img { order: 2; }
.service-detail:nth-child(even) .service-detail-copy { order: 1; }
.service-detail-img { height: 360px; overflow: hidden; }
.service-detail-img img { width: 100%; height: 100%; object-fit: cover; }
.service-detail-copy h2 { margin: 0 0 24px; font-size: clamp(1.55rem, 2.4vw, 2.25rem); line-height: 1.2; font-weight: 800; }
.service-detail-copy p { margin: 0 0 28px; font-size: 1.08rem; line-height: 1.9; }
.services-deep { padding: 105px 0 122px; }
.services-deep .section-intro { max-width: 980px; }
.services-deep .card-grid { margin-top: 82px; }
.services-deep .image-card { min-height: 520px; }
.commercial-copy { max-width: 1000px; margin: 0 auto 72px; text-align: center; font-size: clamp(1.1rem, 1.7vw, 1.42rem); line-height: 1.85; color: rgba(255,255,255,.88); }

/* Enquiries page */
.page-hero-image {
  position: relative;
  min-height: 690px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white);
  background: center/cover no-repeat;
}
.page-hero-image::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.67); }
.page-hero-image .hero-content { padding-top: 0; }
.page-hero-image h1 { font-size: clamp(2.8rem, 4.4vw, 4.4rem); }
.page-hero-image p { font-size: clamp(1.02rem, 1.45vw, 1.35rem); max-width: 960px; }

.contact-form-section { background: var(--white); padding: 96px 0 118px; }
.contact-form-section .top-note { text-align: center; font-size: clamp(1.25rem, 1.8vw, 1.7rem); margin: 0 0 78px; }
.form-grid {
  width: min(960px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 74px;
  align-items: start;
}
.contact-details h2 { margin: 0 0 26px; font-size: clamp(1.75rem, 2.8vw, 2.6rem); line-height: 1.2; }
.contact-details p { margin: 0; font-size: clamp(1.15rem, 1.7vw, 1.65rem); line-height: 1.6; font-weight: 500; }
.connect-label { color: #929292; margin: 46px 0 20px; font-size: 1rem; }
.social-line { display: flex; align-items: center; gap: 18px; }
.social-line a { width: 25px; height: 25px; display: inline-flex; align-items: center; justify-content: center; }
.form-panel { display: grid; gap: 18px; }
.form-panel label { display: block; }
.form-panel input, .form-panel textarea, .form-panel select {
  width: 100%;
  border: 1px solid #c9c9c9;
  background: var(--white);
  color: var(--black);
  padding: 18px 20px;
  min-height: 64px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form-panel textarea { min-height: 122px; resize: vertical; }
.form-panel input:focus, .form-panel textarea:focus, .form-panel select:focus { border-color: #777; box-shadow: 0 0 0 3px rgba(47,47,49,.08); }
.form-actions { margin-top: 16px; }
.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; }
.two-col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.small-help { color: #747474; font-size: .88rem; line-height: 1.6; margin-top: 8px; }
.booking-section { background: var(--light); padding: 90px 0 112px; }
.booking-box { max-width: 960px; margin: 0 auto; background: var(--white); padding: 44px; border-radius: 24px; box-shadow: 0 18px 48px rgba(0,0,0,.07); }
.booking-box h2 { margin: 0 0 16px; font-size: clamp(1.9rem, 3vw, 3rem); text-align: center; }
.booking-box > p { text-align: center; margin: 0 auto 38px; max-width: 720px; line-height: 1.8; }

/* Simple portfolio page */
.portfolio-page { padding-top: 108px; }

/* Footer */
.site-footer {
  background: var(--dark);
  color: rgba(255,255,255,.72);
  padding: 46px 16px;
  text-align: center;
  font-weight: 600;
  letter-spacing: .035em;
}

/* Chatbot */
.chatbot-button {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1200;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 0;
  background: var(--blue);
  color: var(--white);
  box-shadow: 0 18px 40px rgba(47,93,246,.35);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chatbot-panel {
  position: fixed;
  right: 24px;
  bottom: 98px;
  width: min(370px, calc(100% - 32px));
  max-height: 620px;
  z-index: 1200;
  background: var(--white);
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
  overflow: hidden;
  display: none;
}
.chatbot-panel.open { display: block; }
.chatbot-head { background: var(--dark); color: var(--white); padding: 18px 20px; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.chatbot-head strong { display: block; font-size: 1rem; }
.chatbot-head span { display: block; font-size: .82rem; color: rgba(255,255,255,.75); margin-top: 2px; }
.chatbot-close { background: transparent; border: 0; color: white; cursor: pointer; font-size: 1.4rem; }
.chatbot-body { padding: 18px; max-height: 460px; overflow: auto; }
.bot-message, .user-message { padding: 12px 14px; border-radius: 16px; margin-bottom: 10px; line-height: 1.55; font-size: .94rem; }
.bot-message { background: #f1f1f1; color: #111; border-bottom-left-radius: 4px; }
.user-message { background: var(--blue); color: white; border-bottom-right-radius: 4px; margin-left: 38px; }
.chatbot-options { display: grid; gap: 8px; margin-top: 14px; }
.chatbot-options button, .chatbot-options a { border: 1px solid #dedede; background: white; padding: 11px 12px; border-radius: 14px; cursor: pointer; text-align: left; font-weight: 600; }
.chatbot-options button:hover, .chatbot-options a:hover { background: #f7f7f7; }

/* Utilities */
.skip-link { position: absolute; left: -999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { left: 20px; top: 20px; width: auto; height: auto; background: white; color: black; z-index: 2000; padding: 12px 16px; border-radius: 10px; }

@media (max-width: 1120px) {
  .header-inner { grid-template-columns: auto 1fr auto; }
  .brand { text-align: left; white-space: normal; }
  .nav-left, .nav-right { display: none; }
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .about-stage { min-height: 0; display: grid; gap: 34px; }
  .about-image, .about-card { width: 100%; position: static; }
  .about-card { padding: 52px 42px; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { gap: 44px; }
  .service-detail { grid-template-columns: 1fr; gap: 28px; }
  .service-detail:nth-child(even) .service-detail-img, .service-detail:nth-child(even) .service-detail-copy { order: unset; }
}

@media (max-width: 760px) {
  .container { width: min(var(--container), calc(100% - 30px)); }
  .header-inner { min-height: 76px; }
  .hero-video { min-height: calc(100vh - 76px); }
  .hero-content { width: min(1120px, calc(100% - 30px)); }
  .hero-content h1 { font-size: clamp(2.65rem, 13vw, 4.4rem); }
  .hero-content p { margin-top: 30px; }
  .btn { min-width: 188px; min-height: 60px; }
  .section-header { margin-bottom: 56px; }
  .about-overlap, .services-summary, .portfolio-section, .testimonials, .enquiry-cta-section, .why-section, .service-detail-section, .services-deep, .contact-form-section, .booking-section { padding: 74px 0; }
  .about-image { height: 330px; }
  .about-card { padding: 38px 24px; }
  .service-row { grid-template-columns: 1fr; gap: 18px; }
  .service-icon { width: 70px; height: 70px; }
  .card-grid, .testimonial-grid, .why-grid, .form-grid, .two-col { grid-template-columns: 1fr; }
  .why-grid { margin-top: 70px; }
  .image-card { min-height: 460px; }
  .testimonial-grid { gap: 46px; }
  .form-grid { gap: 42px; }
  .booking-box { padding: 30px 18px; }
  .page-hero-image { min-height: 560px; }
}

/* Google Calendar booking integration */
.section-header.compact { margin-bottom: 42px; }
.booking-box-calendar {
  max-width: 1180px;
}
.booking-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 38px 0 28px;
}
.booking-card {
  border: 1px solid #e4e4e4;
  border-radius: 26px;
  padding: 30px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 320px;
}
.booking-card.featured {
  border-color: rgba(47,93,246,.24);
  box-shadow: 0 18px 48px rgba(47,93,246,.12);
}
.booking-kicker {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  background: #f1f1f1;
  color: #343437;
  padding: 7px 12px;
  font-size: .84rem;
  font-weight: 700;
}
.booking-card h3 {
  margin: 0;
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  line-height: 1.2;
}
.booking-card p {
  margin: 0;
  line-height: 1.8;
  color: #4a4a4d;
  flex: 1;
}
.booking-card .btn {
  min-width: 100%;
  min-height: 58px;
}
.calendar-note {
  border-radius: 18px;
  background: #edf3ff;
  color: #1f2d4a;
  padding: 18px 20px;
  line-height: 1.65;
  margin: 26px 0;
}
.calendar-note.success {
  background: #eef9ef;
  color: #183f23;
}
.calendar-note.warning {
  background: #fff5e8;
  color: #58350d;
}
.calendar-embed-shell {
  margin-top: 28px;
}
.calendar-placeholder {
  border: 2px dashed #c9c9c9;
  border-radius: 24px;
  padding: 34px;
  text-align: center;
  background: #fafafa;
}
.calendar-placeholder h3 {
  margin: 0 0 10px;
  font-size: 1.35rem;
}
.calendar-placeholder p {
  margin: 0 auto;
  max-width: 700px;
  line-height: 1.8;
  color: #555;
}
.calendar-placeholder code {
  background: #efefef;
  border-radius: 6px;
  padding: 2px 6px;
}
.fallback-booking-form {
  margin-top: 44px;
  border-top: 1px solid #e6e6e6;
  padding-top: 38px;
}
.fallback-booking-form h3 {
  margin: 0 0 10px;
  font-size: clamp(1.45rem, 2vw, 2rem);
}
.fallback-booking-form > p {
  margin: 0 0 24px;
  color: #555;
  line-height: 1.75;
}

@media (max-width: 960px) {
  .booking-cards { grid-template-columns: 1fr; }
  .booking-card { min-height: auto; }
}


/* Faithful preview refinements */
.about-overlap { padding-top: 116px; }
.services-summary { background:#f6f6f5; }
.card-grid .image-card img { filter: saturate(.94) contrast(1.02); }
.booking-box-calendar { box-shadow: 0 20px 60px rgba(0,0,0,.09); }
.calendar-placeholder { min-height: 320px; display:flex; flex-direction:column; justify-content:center; }
.page-hero-image { background-position:center; }
@media (min-width:1121px){ .services-deep .card-grid { grid-template-columns: repeat(3,1fr); } }

/* Luxury refinement pass: faithful structure, sharper finish */
:root {
  --dark: #252525;
  --darker: #050505;
  --light: #f7f6f2;
  --soft-blue: #edf3f7;
  --white: #ffffff;
  --black: #080808;
  --muted: #686866;
  --line: rgba(255,255,255,.16);
  --blue: #2149e6;
  --gold: #bfa36a;
  --cream: #f3efe6;
  --radius-lg: 32px;
  --radius-xl: 44px;
  --container: 1380px;
  --shadow: 0 34px 90px rgba(0,0,0,.22);
  --shadow-soft: 0 22px 60px rgba(8,8,8,.10);
  --font: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
}

body {
  font-family: var(--font);
  background: var(--light);
  color: #101010;
  overflow-x: hidden;
}
body.preloading { overflow: hidden; }
img { backface-visibility: hidden; }

/* Loader inspired by high-end studio pre-loaders */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: #050505;
  color: #fff;
  transition: opacity .72s cubic-bezier(.22,1,.36,1), visibility .72s cubic-bezier(.22,1,.36,1);
}
.preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-inner { width: min(560px, calc(100% - 48px)); text-align: center; }
.preloader-kicker { font-size: .78rem; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.56); font-weight: 800; }
.preloader-title { margin-top: 18px; font-family: var(--serif); font-size: clamp(3.5rem, 9vw, 8rem); line-height: .82; font-style: italic; }
.preloader-line { height: 2px; margin: 34px 0 16px; background: rgba(255,255,255,.18); overflow: hidden; }
.preloader-line span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #fff, var(--gold)); transition: width .18s linear; }
.preloader-count { font-size: .9rem; color: rgba(255,255,255,.74); letter-spacing: .12em; }

/* Navigation */
.site-header {
  background: rgba(12,12,12,.84) !important;
  backdrop-filter: blur(22px);
  box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 18px 44px rgba(0,0,0,.20);
}
.header-inner { min-height: 86px; }
.brand {
  font-size: clamp(1.12rem, 1.8vw, 1.72rem);
  font-weight: 500;
  letter-spacing: -.02em;
}
.nav-left, .nav-right { font-size: .9rem; letter-spacing: -.01em; gap: 36px; }
.nav-left a, .nav-right a { position: relative; opacity: .96; }
.nav-left a::after, .nav-right a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 0;
  height: 1px;
  background: rgba(255,255,255,.8);
  transition: width .32s cubic-bezier(.22,1,.36,1);
}
.nav-left a:hover::after, .nav-right a:hover::after, .nav-left a.active::after, .nav-right a.active::after { width: 100%; }
.nav-left a:hover, .nav-right a:hover, .nav-left a.active, .nav-right a.active { opacity: 1; }

/* Type and buttons */
.section-title {
  font-weight: 800;
  letter-spacing: -.07em;
  line-height: .95;
}
.section-title.small { font-size: clamp(2.6rem, 5vw, 5.55rem); }
.section-intro {
  max-width: 900px;
  margin-top: 28px;
  color: rgba(16,16,16,.68);
  font-size: clamp(1rem, 1.42vw, 1.22rem);
  line-height: 1.9;
}
.dark-band .section-intro, .enquiry-cta-section p { color: rgba(255,255,255,.72); }
.mini-label {
  display: inline-block;
  margin-bottom: 22px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
}
.btn {
  min-height: 66px;
  letter-spacing: -.02em;
  box-shadow: none;
  overflow: hidden;
  position: relative;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.36), transparent);
  transform: translateX(-120%);
  transition: transform .62s cubic-bezier(.22,1,.36,1);
}
.btn:hover::before { transform: translateX(120%); }
.btn:hover { transform: translateY(-3px); box-shadow: 0 22px 50px rgba(0,0,0,.18); }
.btn-blue { background: linear-gradient(135deg, #244ff6, #123bd4); }
.btn-dark { background: #111; }

/* Hero */
.hero-video { min-height: calc(100svh - 86px); }
.hero-video::after {
  background:
    radial-gradient(circle at 50% 28%, rgba(255,255,255,.08), transparent 24%),
    linear-gradient(180deg, rgba(0,0,0,.52), rgba(0,0,0,.74) 52%, rgba(0,0,0,.93));
}
.hero-content h1 {
  font-size: clamp(3.35rem, 8.2vw, 9.2rem);
  line-height: .94;
  font-weight: 800;
  letter-spacing: -.08em;
}
.hero-content p {
  max-width: 830px;
  margin-top: 34px;
  font-size: clamp(1.02rem, 1.42vw, 1.28rem);
  line-height: 1.88;
  color: rgba(255,255,255,.80);
}
.hero-content .btn { margin-top: 48px; }
.down-arrow {
  width: 32px;
  height: 32px;
  margin-top: 52px;
  opacity: .74;
  animation: cue 1.7s ease-in-out infinite;
}
@keyframes cue { 0%,100% { transform: rotate(45deg) translate(0,0); } 50% { transform: rotate(45deg) translate(7px,7px); } }

/* Premium faithful about block */
.about-overlap {
  background: #252525;
  padding: clamp(96px, 8vw, 138px) 0 clamp(100px, 9vw, 148px);
}
.about-stage { min-height: 640px; }
.about-image {
  height: 560px;
  width: min(65%, 930px);
  border-radius: 28px;
  box-shadow: 0 36px 90px rgba(0,0,0,.32);
}
.about-image img { filter: saturate(.92) contrast(1.02); }
.about-card {
  width: min(51%, 760px);
  min-height: 440px;
  padding: clamp(46px, 5vw, 78px);
  border-radius: 28px;
  box-shadow: 0 34px 90px rgba(0,0,0,.28);
}
.about-card .section-title.small { font-size: clamp(2.8rem, 4.4vw, 5rem); letter-spacing: -.065em; }
.about-card p { font-size: clamp(1rem, 1.32vw, 1.2rem); color: rgba(0,0,0,.68); }
.underline { background: linear-gradient(90deg, #111, rgba(17,17,17,.2)); height: 2px; width: 78px; }

/* Services */
.services-summary { background: #faf9f5; padding: clamp(90px, 9vw, 132px) 0; }
.service-list { gap: 42px; max-width: 1060px; }
.service-row {
  padding: 24px 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
  transition: transform .38s cubic-bezier(.22,1,.36,1), opacity .38s cubic-bezier(.22,1,.36,1);
}
.service-row:hover { transform: translateX(12px); }
.service-icon { color: #0f0f0f; }
.service-row h3 { font-size: clamp(1.28rem, 2vw, 1.8rem); letter-spacing: -.04em; }
.service-row p { font-size: clamp(.98rem, 1.28vw, 1.12rem); color: rgba(0,0,0,.64); }

/* Work scroll section */
.work-scroll-section {
  padding: 0;
  min-height: 245vh;
  position: relative;
  background: #252525;
}
.work-scroll-head { padding-top: clamp(90px, 9vw, 130px); }
.work-scroll-head .section-header { margin-bottom: 44px; }
.work-sticky {
  position: sticky;
  top: 86px;
  height: calc(100svh - 86px);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.work-track-shell { overflow: visible; }
.work-track {
  display: flex;
  gap: 26px;
  width: max-content;
  will-change: transform;
  transition: transform .08s linear;
}
.work-slide {
  flex: 0 0 min(420px, 76vw);
  height: min(560px, 68svh);
  min-height: 430px;
  border-radius: 24px;
  transform-origin: center;
}
.work-slide:nth-child(even) { margin-top: 48px; }
.image-card {
  box-shadow: 0 30px 70px rgba(0,0,0,.34);
  border: 1px solid rgba(255,255,255,.07);
}
.image-card::before { background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.42) 52%, rgba(0,0,0,.06) 100%); }
.image-card img { transition: transform 1.2s cubic-bezier(.22,1,.36,1), filter .7s ease; filter: saturate(.9) contrast(1.03); }
.image-card:hover img { transform: scale(1.055); filter: saturate(1.02) contrast(1.06); }
.image-card-content { padding: 30px; }
.image-card-content span {
  display: inline-block;
  margin-bottom: 16px;
  color: rgba(255,255,255,.56);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .18em;
}
.image-card h3 { font-size: clamp(1.35rem, 2vw, 2rem); letter-spacing: -.055em; }
.image-card p { color: rgba(255,255,255,.82); font-size: .93rem; }

/* Testimonials compact */
.testimonials {
  background: #faf9f5;
  padding: clamp(56px, 6vw, 82px) 0 clamp(62px, 6vw, 90px);
}
.testimonials .section-header { margin-bottom: 34px; }
.testimonials .section-title.small { font-size: clamp(2.2rem, 4vw, 4.2rem); }
.testimonial-grid {
  max-width: 1280px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.testimonial {
  background: #fff;
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 20px;
  padding: 22px 20px;
  box-shadow: 0 18px 45px rgba(0,0,0,.045);
}
.testimonial p { font-size: .92rem; line-height: 1.65; margin-bottom: 14px; color: rgba(0,0,0,.68); }
.testimonial strong { font-size: .95rem; color: #111; }

/* CTA and footer */
.enquiry-cta-section {
  background:
    radial-gradient(circle at top, rgba(255,255,255,.08), transparent 28%),
    #252525;
  padding: clamp(86px, 8vw, 122px) 0;
}
.site-footer { background: #252525; padding: 38px 16px; color: rgba(255,255,255,.62); font-size: .88rem; }

/* Reveal animations */
[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
.image-card[data-reveal] { transform: translateY(36px) scale(.98); }
.image-card[data-reveal].is-visible { transform: translateY(0) scale(1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .preloader { display: none; }
}

@media (max-width: 1120px) {
  .work-scroll-section { min-height: auto; padding-bottom: 84px; }
  .work-sticky { position: static; height: auto; overflow-x: auto; padding-bottom: 18px; }
  .work-track { transform: none !important; padding-right: 28px; }
  .testimonial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .header-inner { min-height: 76px; }
  .hero-video { min-height: calc(100svh - 76px); }
  .hero-content h1 { letter-spacing: -.07em; }
  .about-image { width: 100%; height: 340px; }
  .about-card { width: 100%; }
  .work-sticky { top: 76px; }
  .work-slide { flex-basis: min(330px, 84vw); min-height: 430px; }
  .work-slide:nth-child(even) { margin-top: 0; }
  .testimonial-grid { grid-template-columns: 1fr; }
}

/* V2 refinement: pinned service narrative, separated footer, clickable work cards */
.services-pin {
  background: #faf9f5;
  padding: 0;
  min-height: 250vh;
}
.services-pin-grid {
  display: grid;
  grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr);
  gap: clamp(54px, 7vw, 118px);
  align-items: start;
  padding: clamp(86px, 9vw, 138px) 0 clamp(86px, 9vw, 148px);
}
.services-pin-left {
  position: sticky;
  top: 124px;
  min-height: calc(100svh - 160px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.services-pin-left .section-title.small {
  max-width: 560px;
  font-size: clamp(3.2rem, 7vw, 8rem);
  letter-spacing: -.085em;
}
.services-pin-left .section-intro {
  margin: 28px 0 34px;
  max-width: 500px;
  text-align: left;
}
.services-pin-stack {
  display: grid;
  gap: clamp(34px, 5vw, 62px);
  padding-top: 10vh;
  padding-bottom: 16vh;
}
.service-panel {
  position: sticky;
  top: 132px;
  min-height: min(68svh, 690px);
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 58px);
  align-items: center;
  padding: clamp(34px, 5vw, 70px);
  border-radius: clamp(28px, 4vw, 48px);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 38px 90px rgba(8,8,8,.10);
  transform-origin: top center;
}
.service-panel:nth-child(2) { top: 146px; }
.service-panel:nth-child(3) { top: 160px; }
.service-panel:nth-child(4) { top: 174px; }
.service-panel .service-number {
  position: absolute;
  top: 26px;
  right: 34px;
  font-family: var(--serif);
  font-size: clamp(2.5rem, 4vw, 5rem);
  color: rgba(0,0,0,.08);
  line-height: .8;
}
.service-panel .service-icon {
  width: clamp(72px, 8vw, 120px);
  height: clamp(72px, 8vw, 120px);
  color: #111;
}
.service-panel h3 {
  margin: 0 0 20px;
  font-size: clamp(2.2rem, 4.5vw, 5.2rem);
  line-height: .92;
  letter-spacing: -.075em;
  font-weight: 800;
}
.service-panel p {
  max-width: 650px;
  margin: 0;
  font-size: clamp(1rem, 1.45vw, 1.28rem);
  line-height: 1.82;
  color: rgba(0,0,0,.64);
}
.service-panel:nth-child(2) { background: #f2f4f7; }
.service-panel:nth-child(3) { background: #ffffff; }
.service-panel:nth-child(4) { background: #f0ede5; }

.work-slide { cursor: pointer; }
.work-slide:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
.read-more-cue {
  display: inline-block;
  margin-top: 18px;
  font-style: normal;
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.work-modal {
  position: fixed;
  inset: 0;
  z-index: 8000;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s cubic-bezier(.22,1,.36,1), visibility .35s cubic-bezier(.22,1,.36,1);
}
.work-modal.is-open { opacity: 1; visibility: visible; }
.work-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(12px);
}
.work-modal-card {
  position: relative;
  width: min(760px, 100%);
  padding: clamp(34px, 5vw, 64px);
  border-radius: 34px;
  background: #f8f5ee;
  color: #090909;
  box-shadow: 0 48px 120px rgba(0,0,0,.38);
  transform: translateY(18px) scale(.98);
  transition: transform .42s cubic-bezier(.22,1,.36,1);
}
.work-modal.is-open .work-modal-card { transform: translateY(0) scale(1); }
.work-modal-card span {
  display: inline-block;
  margin-bottom: 18px;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
}
.work-modal-card h3 {
  margin: 0;
  font-size: clamp(2.5rem, 6vw, 5.6rem);
  line-height: .9;
  letter-spacing: -.08em;
}
.work-modal-card p {
  margin: 28px 0 0;
  max-width: 650px;
  font-size: clamp(1rem, 1.45vw, 1.18rem);
  line-height: 1.9;
  color: rgba(0,0,0,.68);
}
.work-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 50%;
  background: #fff;
  color: #111;
  cursor: pointer;
  font-size: 1.4rem;
}

.enquiry-cta-section {
  position: relative;
  border-bottom: 0;
}
.enquiry-cta-section::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(1180px, calc(100% - 56px));
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
}
.site-footer {
  position: relative;
  background: #050505;
  border-top: 1px solid rgba(191,163,106,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.site-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: min(160px, 40%);
  height: 1px;
  background: var(--gold);
}

@media (max-width: 1120px) {
  .services-pin { min-height: auto; }
  .services-pin-grid { grid-template-columns: 1fr; gap: 40px; }
  .services-pin-left, .service-panel, .service-panel:nth-child(2), .service-panel:nth-child(3), .service-panel:nth-child(4) {
    position: static;
    min-height: auto;
  }
  .services-pin-stack { padding: 0; }
}
@media (max-width: 760px) {
  .services-pin-grid { padding: 74px 0; }
  .service-panel { grid-template-columns: 1fr; padding: 32px 24px; }
  .service-panel .service-number { top: 18px; right: 22px; }
  .service-panel h3 { font-size: clamp(2.35rem, 12vw, 4.2rem); }
  .work-modal { padding: 16px; }
}


/* V3 requested refinements */
:root {
  --font: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
}

.preloader-inner {
  width: min(680px, calc(100% - 48px));
}
.preloader-logo {
  width: clamp(72px, 10vw, 126px);
  height: clamp(72px, 10vw, 126px);
  margin: 0 auto 26px;
  object-fit: contain;
  filter: drop-shadow(0 18px 45px rgba(191,163,106,.22));
}
.preloader-kicker {
  font-family: var(--serif);
  font-size: clamp(2.05rem, 5.4vw, 5.4rem);
  line-height: .88;
  letter-spacing: -.045em;
  text-transform: none;
  color: #fff;
  font-weight: 400;
}
.preloader-title {
  margin-top: 16px;
  font-size: clamp(1.2rem, 2.6vw, 2.55rem);
  line-height: 1;
  opacity: .72;
}
.preloader-line { margin-top: 32px; }

.home-page .hero-content h1.hero-title-delay {
  opacity: 0;
  transform: translateY(28px) scale(.985);
  animation: heroTitleArrive 1.15s cubic-bezier(.16, 1, .3, 1) 1.05s forwards;
  font-size: clamp(2.8rem, 5.6vw, 6.1rem);
}
.home-page .hero-content p,
.home-page .hero-content .btn,
.home-page .hero-content .down-arrow {
  opacity: 0;
  animation: heroSupportingArrive .9s cubic-bezier(.16, 1, .3, 1) .35s forwards;
}
.home-page .hero-content .btn { animation-delay: .62s; }
.home-page .hero-content .down-arrow { animation-delay: .84s; }
@keyframes heroTitleArrive { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes heroSupportingArrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.services-pin-left .mini-label:empty { display: none; }
.service-panel {
  grid-template-columns: 96px minmax(0, 1fr);
}
.service-panel .service-number { display: none !important; }

.read-more-cue {
  letter-spacing: .14em;
}

/* About page service block uses the premium work-card language without excess whitespace. */
.about-services-showcase {
  padding: clamp(82px, 8vw, 112px) 0 clamp(96px, 8vw, 124px);
}
.about-service-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.about-service-cards .image-card {
  min-height: 470px;
}

/* Tighter Why Choose Us block. */
.why-section {
  padding: clamp(78px, 7vw, 106px) 0 clamp(84px, 7vw, 110px);
}
.why-grid {
  margin-top: clamp(48px, 5vw, 72px);
  gap: clamp(32px, 5vw, 64px);
}
.why-item svg {
  width: clamp(66px, 6vw, 86px);
  height: clamp(66px, 6vw, 86px);
  margin-bottom: clamp(28px, 3.5vw, 42px);
}

/* Services page: pinned image/text service stack. */
.service-image-pin {
  background: #faf9f5;
  min-height: 270vh;
}
.service-panel-media {
  grid-template-columns: minmax(280px, .92fr) minmax(0, 1.08fr);
  gap: clamp(24px, 4vw, 48px);
  min-height: min(72svh, 740px);
  padding: clamp(18px, 2.4vw, 28px);
}
.service-panel-media .service-panel-img {
  height: 100%;
  min-height: 420px;
  overflow: hidden;
  border-radius: clamp(22px, 3vw, 34px);
  background: #ddd;
}
.service-panel-media .service-panel-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service-panel-media h3 {
  font-size: clamp(2.2rem, 4.25vw, 4.9rem);
}
.service-panel-media p {
  margin-bottom: 28px;
}

/* Enquiries page: booking and fallback in one premium pinned block. */
.booking-pin {
  background: #faf9f5;
  padding: 0;
  min-height: 285vh;
}
.booking-stack {
  padding-top: 8vh;
  padding-bottom: 14vh;
}
.booking-panel {
  grid-template-columns: 1fr;
  align-content: center;
  gap: 0;
  min-height: min(62svh, 610px);
}
.booking-panel .booking-kicker {
  display: inline-block;
  margin-bottom: 20px;
  width: max-content;
  color: var(--gold);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.booking-panel h3 {
  margin-bottom: 22px;
}
.booking-panel p {
  margin-bottom: 28px;
}
.booking-panel .btn {
  width: max-content;
}
.fallback-card {
  min-height: auto;
  align-content: start;
}
.compact-booking-form {
  margin-top: 26px;
}
.compact-booking-form .two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.compact-booking-form input,
.compact-booking-form select,
.compact-booking-form textarea {
  width: 100%;
  margin-bottom: 14px;
}
.contact-form-section {
  padding-top: clamp(76px, 7vw, 102px);
}
.question-header {
  margin-bottom: clamp(42px, 5vw, 68px);
}
.question-header .section-title.small {
  font-size: clamp(2.6rem, 5vw, 5.55rem);
}

/* Footer demarcation and smaller reserved block. */
.enquiry-cta-section {
  padding-bottom: clamp(80px, 7vw, 106px);
}
.site-footer {
  padding: 22px 16px 24px;
  font-size: .78rem;
  letter-spacing: .08em;
}
.site-footer::before {
  width: min(108px, 34%);
}

@media (max-width: 1120px) {
  .about-service-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-image-pin,
  .booking-pin { min-height: auto; }
  .service-panel-media { grid-template-columns: 1fr; min-height: auto; }
  .service-panel-media .service-panel-img { min-height: 320px; height: 320px; }
  .booking-panel { min-height: auto; }
}
@media (max-width: 760px) {
  .preloader-logo { width: 78px; height: 78px; }
  .preloader-kicker { font-size: clamp(2.6rem, 13vw, 4rem); }
  .home-page .hero-content h1.hero-title-delay { font-size: clamp(2.7rem, 13vw, 4.8rem); }
  .about-service-cards { grid-template-columns: 1fr; }
  .compact-booking-form .two-col { grid-template-columns: 1fr; gap: 0; }
  .booking-panel .btn { width: 100%; }
}

/* V4.1 precision fixes requested after review */
.brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--serif);
  font-size: clamp(1.85rem, 2.7vw, 2.85rem);
  line-height: .92;
  letter-spacing: -.045em;
  font-weight: 400;
}
.brand-logo {
  width: clamp(40px, 3.8vw, 58px);
  height: clamp(40px, 3.8vw, 58px);
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.3));
}

.home-page .down-arrow { display: none !important; }
.home-page .hero-content h1.hero-title-delay {
  opacity: 0;
  transform: translateY(28px) scale(.985);
  animation: heroTitleArrive 1.12s cubic-bezier(.16, 1, .3, 1) 1.18s forwards;
  font-size: clamp(3.2rem, 6.2vw, 6.7rem);
}
.home-page .hero-content p {
  opacity: 0;
  animation: heroSupportingArrive .72s cubic-bezier(.16, 1, .3, 1) .18s forwards;
}
.home-page .hero-content .btn {
  opacity: 0;
  animation: heroSupportingArrive .72s cubic-bezier(.16, 1, .3, 1) .42s forwards;
}

.work-scroll-section { min-height: 335vh; }
.work-track { transition: transform .12s linear; }
.work-slide { flex-basis: min(440px, 78vw); }
.work-modal-actions { margin-top: 34px; }
.work-modal-actions .btn {
  min-width: 170px;
  min-height: 58px;
  padding: 0 34px;
}

/* Services page image/text pinned cards: more breathing room and no clipped buttons. */
.service-image-pin { min-height: 335vh; }
.service-panel-media {
  top: 108px;
  grid-template-columns: minmax(260px, .82fr) minmax(0, 1fr);
  min-height: min(76svh, 720px);
  padding: clamp(24px, 3.2vw, 48px);
  gap: clamp(26px, 4.5vw, 58px);
  overflow: hidden;
}
.service-panel-media .service-panel-img {
  height: min(520px, calc(100svh - 235px));
  min-height: 340px;
}
.service-panel-media h3 {
  font-size: clamp(2.25rem, 3.65vw, 4.35rem);
  line-height: .96;
  margin-bottom: 18px;
}
.service-panel-media p {
  font-size: clamp(1rem, 1.18vw, 1.18rem);
  line-height: 1.68;
  margin-bottom: 24px;
}
.service-panel .btn,
.service-panel-media .btn,
.booking-panel .btn {
  min-width: 0;
  width: max-content;
  max-width: 100%;
  min-height: 62px;
  padding: 0 34px;
  white-space: nowrap;
  line-height: 1.1;
}

/* Services page residential/commercial strips now mirror the premium See Our Work card language. */
.services-work-strip {
  padding: clamp(94px, 8vw, 128px) 0 clamp(86px, 8vw, 118px);
  overflow: hidden;
}
.services-work-strip + .services-work-strip { padding-top: clamp(66px, 7vw, 94px); }
.services-work-strip .section-header { margin-bottom: clamp(42px, 5vw, 70px); }
.service-work-cards {
  display: flex;
  grid-template-columns: none !important;
  gap: 26px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  padding: 10px 8px 28px;
  margin-top: clamp(44px, 5vw, 70px) !important;
  scrollbar-width: thin;
}
.service-work-cards::-webkit-scrollbar { height: 10px; }
.service-work-cards::-webkit-scrollbar-track { background: rgba(255,255,255,.08); border-radius: 999px; }
.service-work-cards::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); border-radius: 999px; }
.service-work-slide {
  flex: 0 0 min(430px, 78vw);
  min-height: 555px !important;
  height: min(570px, 70svh);
  scroll-snap-align: start;
}
.service-work-slide:nth-child(even) { margin-top: 46px; }
.service-work-slide .image-card-content { padding: 30px; }
.service-work-slide .read-more-cue { color: rgba(255,255,255,.76); }

@media (max-width: 1120px) {
  .brand { font-size: clamp(1.35rem, 4.2vw, 2rem); gap: 10px; }
  .brand-logo { width: 40px; height: 40px; }
  .work-scroll-section { min-height: auto; }
  .service-image-pin { min-height: auto; }
  .service-panel-media {
    grid-template-columns: 1fr;
    min-height: auto;
    top: auto;
  }
  .service-panel-media .service-panel-img { height: 340px; min-height: 300px; }
  .service-panel-media h3 { font-size: clamp(2.25rem, 9vw, 4.1rem); }
  .service-work-slide:nth-child(even) { margin-top: 0; }
}
@media (max-width: 760px) {
  .brand span { max-width: 230px; }
  .brand-logo { width: 34px; height: 34px; }
  .home-page .hero-content h1.hero-title-delay { font-size: clamp(3rem, 14vw, 5.2rem); }
  .service-panel .btn,
  .service-panel-media .btn,
  .booking-panel .btn {
    width: 100%;
    white-space: normal;
    padding: 0 22px;
  }
  .service-work-slide { flex-basis: min(330px, 86vw); min-height: 480px !important; height: 520px; }
}

/* Tie the home hero entrance to the loader finishing, so subtitle appears before the headline. */
body.home-page.preloading .hero-content h1.hero-title-delay,
body.home-page.preloading .hero-content p,
body.home-page.preloading .hero-content .btn {
  animation: none !important;
  opacity: 0 !important;
}
body.home-page:not(.preloading) .hero-content p {
  opacity: 0;
  animation: heroSupportingArrive .72s cubic-bezier(.16, 1, .3, 1) .04s forwards;
}
body.home-page:not(.preloading) .hero-content .btn {
  opacity: 0;
  animation: heroSupportingArrive .72s cubic-bezier(.16, 1, .3, 1) .32s forwards;
}
body.home-page:not(.preloading) .hero-content h1.hero-title-delay {
  opacity: 0;
  transform: translateY(28px) scale(.985);
  animation: heroTitleArrive 1.12s cubic-bezier(.16, 1, .3, 1) 1.15s forwards;
}


/* V6 refinements: loader sequence, header prominence, adjusted cards and chatbot accordion */
.preloader-inner {
  width: min(640px, calc(100% - 48px));
}
.preloader-logo {
  width: clamp(118px, 14vw, 196px);
  height: clamp(118px, 14vw, 196px);
  margin: 0 auto 30px;
}
.preloader-line {
  width: min(360px, 76vw);
  margin: 0 auto 26px;
  height: 2px;
}
.preloader-brand,
.preloader-tagline {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.preloader-brand {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5.6vw, 5.2rem);
  line-height: .92;
  letter-spacing: -.048em;
  font-weight: 400;
  color: #fff;
}
.preloader-tagline {
  margin-top: 18px;
  font-size: clamp(.95rem, 1.75vw, 1.38rem);
  line-height: 1.4;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  font-weight: 800;
}
.preloader.stage-50 .preloader-brand,
.preloader.stage-90 .preloader-tagline {
  opacity: 1;
  transform: translateY(0);
}
.preloader-count { display: none !important; }

.brand {
  font-size: clamp(2.02rem, 3vw, 3.15rem) !important;
  gap: 16px;
}
.brand-logo {
  width: clamp(44px, 4.2vw, 64px);
  height: clamp(44px, 4.2vw, 64px);
}
.header-inner { min-height: 92px; }

.home-page .hero-content h1.hero-title-delay {
  font-size: clamp(3.45rem, 6.85vw, 7.35rem) !important;
  margin-bottom: clamp(26px, 3.4vw, 46px);
}
.home-page .hero-content p {
  margin-top: 0;
}
.home-page .hero-content .down-arrow,
.home-page .hero-video .down-arrow,
.home-page .hero-video a:has(.down-arrow) { display: none !important; }
.home-page .work-scroll-section {
  min-height: 430vh !important;
}

/* Bring the overlapping about blocks closer to the original Tilda proportions. */
.about-overlap {
  padding-top: clamp(82px, 7vw, 112px);
  padding-bottom: clamp(86px, 7.8vw, 118px);
}
.about-stage {
  min-height: 590px !important;
}
.about-image {
  width: min(58%, 930px) !important;
  height: 560px !important;
}
.about-card {
  width: min(47%, 730px) !important;
  min-height: 520px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  bottom: 0;
}
.about-card p {
  max-width: 560px;
}

.why-item .trusted-icon {
  width: clamp(92px, 8vw, 122px);
  height: clamp(92px, 8vw, 122px);
  overflow: visible;
}
.about-services-showcase {
  padding-top: clamp(54px, 5.6vw, 76px) !important;
}

.services-page .hero-content h1 {
  font-size: clamp(3.45rem, 6.85vw, 7.35rem) !important;
  letter-spacing: -.075em;
}
.services-page .hero-video video,
.services-page .hero-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.services-page .hero-video video { z-index: 0; }
.services-page .hero-fallback { z-index: -1; }
.services-page .hero-content { position: relative; z-index: 2; }

/* Services page pinned cards: smaller and more readable in the viewport. */
.service-image-pin { min-height: 370vh !important; }
.service-panel-media {
  top: 104px !important;
  min-height: min(60svh, 610px) !important;
  padding: clamp(22px, 2.8vw, 38px) !important;
  gap: clamp(22px, 3.6vw, 46px) !important;
  align-items: center;
}
.service-panel-media:nth-child(2) { top: 118px !important; }
.service-panel-media:nth-child(3) { top: 132px !important; }
.service-panel-media:nth-child(4) { top: 146px !important; }
.service-panel-media .service-panel-img {
  height: min(420px, calc(100svh - 250px)) !important;
  min-height: 285px !important;
}
.service-panel-media h3 {
  font-size: clamp(2rem, 3.25vw, 3.8rem) !important;
  margin-bottom: 16px !important;
}
.service-panel-media p {
  font-size: clamp(.98rem, 1.08vw, 1.1rem) !important;
  line-height: 1.6 !important;
  margin-bottom: 22px !important;
}
.service-panel .btn,
.service-panel-media .btn,
.booking-panel .btn {
  min-width: 236px !important;
  min-height: 64px !important;
  padding: 0 30px !important;
  white-space: normal !important;
  text-align: center;
}

/* Scroll-driven service card strips to match the Home See Our Work behaviour. */
.services-work-strip.service-horizontal-scroll {
  padding: 0 !important;
  min-height: 330vh;
  position: relative;
  overflow: visible;
}
.services-work-strip.service-horizontal-scroll + .services-work-strip.service-horizontal-scroll {
  margin-top: -8vh;
}
.service-strip-head {
  padding-top: clamp(78px, 7vw, 108px);
}
.service-strip-head .section-header {
  margin-bottom: 36px;
}
.service-strip-head .commercial-copy {
  margin: 28px auto 0;
}
.service-strip-sticky {
  position: sticky;
  top: 92px;
  height: calc(100svh - 92px);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.service-horizontal-track {
  overflow: visible !important;
  padding: 0 !important;
  margin-top: 0 !important;
  scrollbar-width: none;
  will-change: transform;
  transition: transform .12s linear;
}
.service-horizontal-track::-webkit-scrollbar { display: none; }
.service-horizontal-track .service-work-slide {
  flex: 0 0 min(430px, 78vw);
  height: min(570px, 70svh);
}

/* Native calendar fallback placeholder. */
input[name="preferred_date"][type="text"]::placeholder {
  color: rgba(0,0,0,.45);
}

/* Chatbot as toggleable accordion rather than repeated messages. */
.chatbot-body { max-height: 500px; }
.chatbot-accordion {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}
.chatbot-qa {
  border: 1px solid #e1e1e1;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}
.chatbot-question {
  width: 100%;
  border: 0;
  background: #fff;
  padding: 13px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  font-weight: 700;
  cursor: pointer;
}
.chatbot-question:hover { background: #f7f7f7; }
.chatbot-plus {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
  font-weight: 800;
}
.chatbot-answer {
  padding: 0 14px 14px;
  font-size: .92rem;
  line-height: 1.6;
  color: rgba(0,0,0,.68);
}
.chatbot-links {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}
.chatbot-links a {
  border: 1px solid #dedede;
  background: white;
  padding: 11px 12px;
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font-weight: 700;
}
.chatbot-links a:hover { background: #f7f7f7; }
.chatbot-options { display: none !important; }

@media (max-width: 1120px) {
  .brand { font-size: clamp(1.5rem, 4.7vw, 2.25rem) !important; }
  .about-stage { min-height: 0 !important; }
  .about-image, .about-card { width: 100% !important; }
  .about-image { height: 380px !important; }
  .about-card { min-height: auto !important; }
  .service-image-pin, .services-work-strip.service-horizontal-scroll { min-height: auto !important; }
  .service-strip-sticky { position: static; height: auto; overflow-x: auto; padding-bottom: 36px; }
  .service-horizontal-track { overflow-x: auto !important; transform: none !important; padding-bottom: 22px !important; }
  .service-panel-media { top: auto !important; min-height: auto !important; }
  .service-panel-media .service-panel-img { height: 320px !important; min-height: 280px !important; }
}
@media (max-width: 760px) {
  .preloader-logo { width: 128px; height: 128px; }
  .preloader-brand { font-size: clamp(2.2rem, 13vw, 4rem); }
  .preloader-tagline { font-size: .78rem; letter-spacing: .18em; }
  .brand { font-size: clamp(1.32rem, 6.4vw, 1.82rem) !important; }
  .brand-logo { width: 38px; height: 38px; }
  .home-page .hero-content h1.hero-title-delay,
  .services-page .hero-content h1 { font-size: clamp(3rem, 14vw, 5.2rem) !important; }
  .service-panel .btn,
  .service-panel-media .btn,
  .booking-panel .btn { width: 100%; min-width: 0 !important; }
}

/* V7 final refinements requested: faster loader, cleaner spacing, service card summaries and fitted enquiry actions. */
.preloader-tagline {
  font-family: var(--font) !important;
  font-size: clamp(1rem, 1.45vw, 1.22rem) !important;
  line-height: 1.45 !important;
  letter-spacing: .055em !important;
  text-transform: none !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,.72) !important;
}
.brand {
  font-size: clamp(2.12rem, 3.12vw, 3.32rem) !important;
}
.home-page .hero-content h1.hero-title-delay {
  margin-bottom: clamp(36px, 4.1vw, 58px) !important;
}
.home-page .services-summary .service-panel h3 {
  font-size: clamp(2rem, 3.25vw, 3.8rem) !important;
}
.home-page .work-scroll-section .image-card-content > span {
  display: none !important;
}
.home-page .work-scroll-section .image-card-content h3 {
  margin-top: 0;
}

/* Services page hero entrance mirrors the homepage: video/subtext first, then title. */
body.services-page.preloading .hero-content h1.hero-title-delay,
body.services-page.preloading .hero-content p,
body.services-page.preloading .hero-content .btn {
  animation: none !important;
  opacity: 0 !important;
}
body.services-page:not(.preloading) .hero-content p {
  opacity: 0;
  animation: heroSupportingArrive .72s cubic-bezier(.16, 1, .3, 1) .04s forwards;
}
body.services-page:not(.preloading) .hero-content .btn {
  opacity: 0;
  animation: heroSupportingArrive .72s cubic-bezier(.16, 1, .3, 1) .32s forwards;
}
body.services-page:not(.preloading) .hero-content h1.hero-title-delay {
  opacity: 0;
  transform: translateY(28px) scale(.985);
  animation: heroTitleArrive 1.12s cubic-bezier(.16, 1, .3, 1) 1.15s forwards;
}
.services-page .hero-content p {
  font-family: var(--font);
}
.services-page .hero-content h1.hero-title-delay {
  font-size: clamp(3.45rem, 6.85vw, 7.35rem) !important;
}
.services-page .service-panel-media .btn {
  min-width: 0 !important;
  width: max-content !important;
  max-width: 100%;
  min-height: 58px !important;
  padding: 0 34px !important;
  white-space: nowrap !important;
}
.services-work-strip.service-horizontal-scroll + .services-work-strip.service-horizontal-scroll {
  margin-top: clamp(26px, 3vh, 46px) !important;
}
.services-work-strip .image-card-content p {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* About page: icon clarity, tighter header approach and wider cards without becoming oversized. */
.why-item .trusted-icon {
  width: clamp(104px, 8.6vw, 132px) !important;
  height: clamp(104px, 8.6vw, 132px) !important;
  overflow: visible !important;
}
.about-services-showcase {
  padding-top: clamp(28px, 3.4vw, 48px) !important;
}
.about-services-showcase .work-scroll-head {
  padding-top: clamp(36px, 4vw, 56px) !important;
}
.about-services-showcase .section-header {
  margin-bottom: clamp(40px, 5vw, 62px) !important;
}
.about-service-cards {
  display: flex !important;
  gap: clamp(22px, 2vw, 30px) !important;
  overflow-x: auto !important;
  padding: 4px 0 18px !important;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.about-service-cards .image-card {
  flex: 0 0 min(390px, 82vw) !important;
  min-height: 500px !important;
  scroll-snap-align: start;
}

/* Enquiries page: fitted CTAs, single-line e-mail where space permits and tighter social icons. */
.enquiries-page .booking-panel .btn {
  min-width: 0 !important;
  width: max-content !important;
  max-width: 100%;
  min-height: 58px !important;
  padding: 0 42px !important;
  white-space: nowrap !important;
}
.enquiries-page .contact-details h2 {
  font-size: clamp(1.72rem, 2.25vw, 2.25rem) !important;
  line-height: 1.42 !important;
}
.enquiries-page .contact-details h2 a[href^="mailto:"] {
  white-space: nowrap;
}
.social-line {
  gap: 9px !important;
}
.social-line a {
  width: 22px !important;
  height: 22px !important;
}

@media (max-width: 760px) {
  .brand { font-size: clamp(1.42rem, 6.6vw, 1.96rem) !important; }
  .services-page .service-panel-media .btn,
  .enquiries-page .booking-panel .btn {
    width: 100% !important;
    white-space: normal !important;
  }
  .enquiries-page .contact-details h2 {
    white-space: normal;
    font-size: clamp(1.38rem, 6vw, 1.85rem) !important;
  }
}


/* V8 final polish: faster loader, V4-style loader subtext, service-card text discipline and tighter CTAs. */
.preloader { transition: opacity .48s cubic-bezier(.22,1,.36,1), visibility .48s cubic-bezier(.22,1,.36,1) !important; }
.preloader-brand,
.preloader-tagline { transition-duration: .26s !important; }
.preloader-tagline {
  font-family: var(--font) !important;
  font-size: clamp(.9rem, 1.55vw, 1.18rem) !important;
  line-height: 1.35 !important;
  letter-spacing: .24em !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
  color: rgba(255,255,255,.72) !important;
}

/* Services page hero: align headline scale to home, keep the video/subtext-first behaviour. */
.services-page .hero-content h1.hero-title-delay {
  font-size: clamp(3.45rem, 6.85vw, 7.35rem) !important;
}

/* Home service-card headers match the Services page pinned-card scale. */
.home-page .services-summary .service-panel h3 {
  font-size: clamp(2rem, 3.25vw, 3.8rem) !important;
}

/* Services: no dead white band between residential/commercial strips, just a stronger header pause. */
.services-work-strip.service-horizontal-scroll + .services-work-strip.service-horizontal-scroll {
  margin-top: 0 !important;
}
.services-work-strip.service-horizontal-scroll + .services-work-strip.service-horizontal-scroll .service-strip-head {
  padding-top: clamp(118px, 11vw, 168px) !important;
}
.services-work-strip.service-horizontal-scroll:first-of-type {
  padding-bottom: 0 !important;
}
.services-work-strip .image-card-content p,
.service-work-slide .image-card-content p {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.service-work-slide .image-card-content {
  min-height: 218px;
}
.service-work-slide .image-card h3,
.service-work-slide h3 {
  text-transform: none;
}

/* About: make the Painting Services cards scroll with the same premium horizontal rhythm as See Our Work. */
.about-services-showcase.about-horizontal-scroll {
  padding: 0 !important;
  min-height: 245vh !important;
  position: relative;
  overflow: visible;
}
.about-services-showcase.about-horizontal-scroll .work-scroll-head {
  padding-top: clamp(70px, 6vw, 96px) !important;
}
.about-services-showcase.about-horizontal-scroll .section-header {
  margin-bottom: 34px !important;
}
.about-service-sticky {
  position: sticky;
  top: 92px;
  height: calc(100svh - 92px);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.about-track-shell { overflow: visible; }
.about-service-cards.service-horizontal-track {
  display: flex !important;
  gap: 26px !important;
  width: max-content;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  scrollbar-width: none;
  will-change: transform;
  transition: transform .12s linear;
}
.about-service-cards.service-horizontal-track::-webkit-scrollbar { display: none; }
.about-service-cards .image-card {
  flex: 0 0 min(395px, 76vw) !important;
  height: min(540px, 66svh) !important;
  min-height: 430px !important;
  scroll-snap-align: none;
}
.about-service-cards .image-card:nth-child(even) { margin-top: 48px; }
.why-item .trusted-icon {
  width: clamp(112px, 9vw, 142px) !important;
  height: clamp(112px, 9vw, 142px) !important;
}

/* Enquiries page: slightly slimmer CTAs while keeping the premium pill form. */
.enquiries-page .booking-panel .btn,
.enquiries-page .form-actions .btn,
.enquiries-page .btn {
  min-height: 50px !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
  min-width: 0 !important;
  width: max-content !important;
}
.enquiries-page .booking-panel .btn { min-height: 54px !important; }
.enquiries-page .form-actions .btn { min-height: 52px !important; }

@media (max-width: 1120px) {
  .about-services-showcase.about-horizontal-scroll,
  .services-work-strip.service-horizontal-scroll { min-height: auto !important; }
  .about-service-sticky { position: static; height: auto; overflow-x: auto; padding-bottom: 36px; }
  .about-service-cards.service-horizontal-track { overflow-x: auto !important; transform: none !important; padding-bottom: 20px !important; }
  .about-service-cards .image-card:nth-child(even) { margin-top: 0; }
}
@media (max-width: 760px) {
  .enquiries-page .booking-panel .btn,
  .enquiries-page .form-actions .btn,
  .enquiries-page .btn {
    width: 100% !important;
    white-space: normal !important;
  }
}


/* V9 refinement pass */
.preloader-tagline {
  font-family: var(--font) !important;
  font-size: clamp(1.12rem, 2.2vw, 2.18rem) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,.72) !important;
}

.about-stage {
  min-height: 586px !important;
}
.about-image {
  height: 548px !important;
}
.about-card {
  min-height: 530px !important;
  bottom: 6px !important;
}

.service-icon {
  width: 76px !important;
  height: 76px !important;
  color: #111 !important;
}
.service-panel .service-icon path,
.service-panel .service-icon line,
.service-panel .service-icon polyline,
.service-panel .service-icon circle,
.service-panel .service-icon rect {
  stroke-width: 2.25 !important;
  vector-effect: non-scaling-stroke;
}

.why-item .trusted-icon,
.why-item .trusted-icon-img {
  width: clamp(72px, 7vw, 94px) !important;
  height: clamp(72px, 7vw, 94px) !important;
  display: block;
  object-fit: contain;
}

.chatbot-panel {
  max-height: min(76vh, 620px) !important;
  display: none;
  flex-direction: column;
}
.chatbot-panel.open {
  display: flex !important;
}
.chatbot-body {
  max-height: none !important;
  flex: 1 1 auto;
  overflow: auto;
}

.services-work-strip .image-card,
.service-horizontal-track .service-work-slide,
.service-work-slide {
  min-height: 610px !important;
  height: min(620px, 78svh) !important;
}
.services-work-strip .image-card-content,
.service-work-slide .image-card-content {
  min-height: 252px !important;
  padding-bottom: 36px !important;
}
.services-work-strip .image-card-content p,
.service-work-slide .image-card-content p {
  -webkit-line-clamp: 2 !important;
}
.services-work-strip .read-more-cue {
  display: inline-block;
  margin-top: 14px;
}

.social-line a img {
  width: 18px;
  height: 18px;
  display: block;
}
.social-line a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1120px) {
  .services-work-strip .image-card,
  .service-horizontal-track .service-work-slide,
  .service-work-slide {
    min-height: 560px !important;
    height: 560px !important;
  }
}
@media (max-width: 760px) {
  .preloader-tagline {
    font-size: clamp(1rem, 5vw, 1.34rem) !important;
  }
  .chatbot-panel {
    right: 12px !important;
    width: min(370px, calc(100% - 24px)) !important;
    bottom: 86px !important;
  }
  .services-work-strip .image-card,
  .service-horizontal-track .service-work-slide,
  .service-work-slide {
    min-height: 520px !important;
    height: 520px !important;
  }
}


/* V10 final polish */
.preloader-tagline {
  font-family: "Baskerville", "Palatino Linotype", "Book Antiqua", Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(1.2rem, 2.2vw, 2.32rem) !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  line-height: 1.1 !important;
  color: rgba(255,255,255,.82) !important;
  text-shadow: 0 3px 18px rgba(0,0,0,.18);
}

/* remove meta label line from work modals */
.work-modal-card > span {
  display: none !important;
}

/* about page trusted expertise */
.why-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.why-item .trusted-icon,
.why-item .trusted-icon-img,
.why-item .trusted-icon-svg {
  width: clamp(84px, 7.2vw, 104px) !important;
  height: clamp(84px, 7.2vw, 104px) !important;
  margin: 0 auto 30px !important;
  display: block;
  object-fit: contain;
  color: #111;
}
.why-item .trusted-icon-svg {
  overflow: visible;
}

/* home about overlap: tighten top misalignment slightly more */
.about-stage {
  min-height: 582px !important;
}
.about-image {
  height: 540px !important;
}
.about-card {
  min-height: 522px !important;
  bottom: 8px !important;
}

/* service stack icons refined */
.service-panel .service-icon {
  width: 78px !important;
  height: 78px !important;
}
.service-panel .service-icon path,
.service-panel .service-icon line,
.service-panel .service-icon polyline,
.service-panel .service-icon rect,
.service-panel .service-icon circle {
  vector-effect: non-scaling-stroke;
  stroke-width: 2.15 !important;
}

/* services page: make horizontal cards mirror home-page cards */
.services-work-strip.service-horizontal-scroll {
  min-height: 335vh !important;
}
.service-strip-sticky {
  top: 86px !important;
  height: calc(100svh - 86px) !important;
}
.service-horizontal-track {
  gap: 26px !important;
}
.service-horizontal-track .service-work-slide,
.service-work-slide {
  flex: 0 0 min(420px, 76vw) !important;
  height: min(560px, 68svh) !important;
  min-height: 430px !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  transform-origin: center;
}
.service-work-slide:nth-child(even) {
  margin-top: 48px !important;
}
.services-work-strip .image-card,
.service-horizontal-track .service-work-slide,
.service-work-slide {
  border-radius: 24px !important;
}
.service-work-slide .image-card-content,
.services-work-strip .image-card-content {
  padding: 30px 30px 40px !important;
}
.services-work-strip .image-card-content p,
.service-work-slide .image-card-content p {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-bottom: 0 !important;
}
.services-work-strip .read-more-cue,
.service-work-slide .read-more-cue {
  display: inline-block !important;
  margin-top: 18px !important;
  padding-bottom: 2px;
}

@media (max-width: 1120px) {
  .service-horizontal-track .service-work-slide,
  .service-work-slide {
    flex-basis: min(360px, 82vw) !important;
    height: 540px !important;
    min-height: 430px !important;
  }
}
@media (max-width: 760px) {
  .preloader-tagline {
    font-size: clamp(1.02rem, 5vw, 1.5rem) !important;
  }
  .service-horizontal-track .service-work-slide,
  .service-work-slide {
    flex-basis: min(330px, 84vw) !important;
    height: 520px !important;
    min-height: 430px !important;
  }
  .service-work-slide:nth-child(even) {
    margin-top: 0 !important;
  }
}


/* V11 polish */
.work-modal-card > span.service-modal-eyebrow {
  display: inline-block !important;
}
.work-modal-card > span:not(.service-modal-eyebrow) {
  display: none !important;
}
.services-work-strip .image-card-content,
.service-work-slide .image-card-content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-self: stretch !important;
  width: 100% !important;
  height: 100% !important;
}
.services-work-strip .read-more-cue,
.service-work-slide .read-more-cue {
  margin-top: auto !important;
  padding-top: 20px !important;
  align-self: flex-start !important;
}


/* V12 final polish */
/* Keep title, summary and learn-more grouped low on the card like home-page See Our Work */
.services-work-strip .image-card-content,
.service-work-slide .image-card-content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-self: stretch !important;
  width: 100% !important;
  height: 100% !important;
}
.services-work-strip .read-more-cue,
.service-work-slide .read-more-cue {
  margin-top: 14px !important;
  padding-top: 0 !important;
  align-self: flex-start !important;
}

/* Enquiries page: all booking CTA buttons in the book-an-appointment block should be black */
.booking-cards .btn,
.booking-card .btn,
.calendar-booking-link {
  background: #111 !important;
  color: #fff !important;
  border-color: #111 !important;
}
.booking-cards .btn:hover,
.booking-card .btn:hover,
.calendar-booking-link:hover {
  background: #222 !important;
  border-color: #222 !important;
  color: #fff !important;
}


/* V13 deploy-ready enquiry CTA and chatbot refinements */
.enquiries-page .booking-pin .btn,
.enquiries-page .contact-form-section .form-actions .btn,
.enquiries-page .form-actions .btn {
  background: #111 !important;
  color: #fff !important;
  border-color: #111 !important;
}
.enquiries-page .booking-pin .btn:hover,
.enquiries-page .contact-form-section .form-actions .btn:hover,
.enquiries-page .form-actions .btn:hover {
  background: #222 !important;
  border-color: #222 !important;
  color: #fff !important;
}


/* V14 final naming and CTA hover polish */
.btn:hover,
.btn:focus-visible {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: #fff !important;
}


/* V16 final CTA sizing polish */
.home-page .services-summary .services-pin-left .btn[href="services.html"] {
  min-height: 60px !important;
  padding: 0 34px !important;
  font-size: 1.02rem !important;
}


/* V17: Services page Book a consultation CTA sizing only */
.services-page .service-image-pin .services-pin-left .btn[href="enquiries.html#booking"] {
  min-height: 64px !important;
  padding: 0 40px !important;
  font-size: 1.08rem !important;
  border-radius: 999px !important;
}

/* V19: Pieter/375-inspired premium launch refinement */
:root {
  --jic-ink: #121817;
  --jic-cream: #efe9dc;
  --jic-sage: #9cab88;
  --jic-sage-dark: #7f8d70;
}

/* Loader */
.preloader-tagline {
  font-family: "Instrument Serif", Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(1.75rem, 4.3vw, 4.7rem) !important;
  line-height: .88 !important;
  letter-spacing: -.055em !important;
  text-transform: none !important;
  color: rgba(239,233,220,.94) !important;
  text-shadow: 0 18px 52px rgba(0,0,0,.38) !important;
}

/* Hidden-on-load floating navigation. The brand is home; no separate Home tab. */
.site-header.reveal-header,
.site-header.reveal-header.is-black {
  position: fixed !important;
  inset: 18px 0 auto 0 !important;
  z-index: 6000 !important;
  background: transparent !important;
  color: var(--jic-ink) !important;
  backdrop-filter: none !important;
  transform: translateY(-145%) scale(.985) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform .55s cubic-bezier(.22,1,.36,1), opacity .45s ease !important;
}
.site-header.reveal-header.is-visible,
.site-header.reveal-header:focus-within {
  transform: translateY(0) scale(1) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.site-header.reveal-header .header-inner {
  width: min(1220px, calc(100% - 32px)) !important;
  min-height: 66px !important;
  margin: 0 auto !important;
  padding: 7px !important;
  border: 1px solid rgba(18,24,23,.1) !important;
  border-radius: 999px !important;
  background: rgba(239,233,220,.82) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.18) !important;
  backdrop-filter: blur(24px) saturate(1.15) !important;
  grid-template-columns: auto 1fr auto !important;
  gap: 12px !important;
}
.site-header.reveal-header .brand {
  justify-self: start !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 3px 12px 3px 5px !important;
  border-radius: 999px !important;
  color: var(--jic-ink) !important;
  text-align: left !important;
  font-family: "Instrument Serif", Georgia, serif !important;
  font-size: clamp(1.55rem, 2.15vw, 2.3rem) !important;
  font-weight: 400 !important;
  letter-spacing: -.035em !important;
  line-height: .92 !important;
}
.site-header.reveal-header .brand-logo {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain !important;
}
.site-header.reveal-header .nav-left,
.site-header.reveal-header .nav-right {
  gap: 7px !important;
  align-items: center !important;
  font-size: .88rem !important;
}
.site-header.reveal-header .nav-left { justify-content: center !important; }
.site-header.reveal-header .nav-left a,
.site-header.reveal-header .nav-right a,
.site-header.reveal-header .nav-booking-cta {
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 20px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(18,24,23,.10) !important;
  background: rgba(255,255,255,.42) !important;
  color: var(--jic-ink) !important;
  font-weight: 900 !important;
  letter-spacing: -.015em !important;
  opacity: 1 !important;
  cursor: pointer !important;
}
.site-header.reveal-header .nav-left a.active,
.site-header.reveal-header .nav-right a.active {
  background: var(--jic-ink) !important;
  color: var(--jic-cream) !important;
  border-color: var(--jic-ink) !important;
}
.site-header.reveal-header .nav-booking-cta {
  background: var(--jic-sage) !important;
  border-color: var(--jic-sage) !important;
  color: var(--jic-ink) !important;
  padding-right: 16px !important;
}
.site-header.reveal-header .nav-booking-cta::after {
  content: "›";
  width: 30px;
  height: 30px;
  margin-left: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--jic-cream);
  background: var(--jic-ink);
  font-size: 1.4rem;
  line-height: 1;
}
.site-header.reveal-header .nav-left a:hover,
.site-header.reveal-header .nav-right a:hover,
.site-header.reveal-header .nav-booking-cta:hover,
.mobile-booking-cta:hover {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: #fff !important;
}
.site-header.reveal-header .menu-toggle {
  color: var(--jic-ink) !important;
  background: rgba(255,255,255,.5) !important;
  border-radius: 999px !important;
}
.site-header.reveal-header .mobile-menu {
  background: rgba(239,233,220,.94) !important;
  border: 1px solid rgba(18,24,23,.1) !important;
  border-radius: 28px !important;
  margin-top: 10px !important;
  padding: 18px !important;
  color: var(--jic-ink) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.16) !important;
}
.mobile-booking-cta {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 999px;
  margin-top: 10px;
  background: var(--jic-sage);
  color: var(--jic-ink);
  font-weight: 900;
}

/* Hero treatment inspired by editorial landing pages */
.hero-video,
.page-hero-image,
.about-cinematic {
  min-height: 100svh !important;
  border-radius: 0 !important;
}
.hero-video::after {
  background: radial-gradient(circle at 50% 36%, rgba(0,0,0,.18), transparent 28%), linear-gradient(180deg, rgba(0,0,0,.56), rgba(0,0,0,.78)) !important;
}
.hero-kicker {
  margin: 0 auto 24px;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 18px;
  border-radius: 999px;
  background: rgba(239,233,220,.16);
  border: 1px solid rgba(239,233,220,.22);
  color: rgba(239,233,220,.82);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hero-content h1,
.hero-video .hero-content h1,
.page-hero-image h1 {
  font-family: "Instrument Serif", Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: -.065em !important;
  line-height: .92 !important;
  color: var(--jic-cream) !important;
}
.hero-content h1 em,
.hero-video .hero-content h1 em,
.page-hero-image h1 em,
.about-card h2 em,
.luxe-cta-left h2 em {
  font-family: "Instrument Serif", Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
}
.hero-video .hero-content p,
.page-hero-image .hero-content p {
  max-width: 840px !important;
  color: rgba(239,233,220,.82) !important;
  margin-top: 30px !important;
}
.hero-content .btn-light,
.hero-content .btn-dark,
.hero-content .btn-blue {
  background: var(--jic-sage) !important;
  color: var(--jic-ink) !important;
  min-height: 58px !important;
  min-width: 190px !important;
}
.services-page .hero-video .hero-content h1 {
  font-size: clamp(3.05rem, 7vw, 6.25rem) !important;
}
.home-page .hero-video .hero-content h1 {
  font-size: clamp(3.4rem, 8.2vw, 8.35rem) !important;
}

/* About page first block: cinematic, not boxy */
.about-page .about-cinematic {
  display: flex;
  align-items: center;
  background: var(--jic-ink) !important;
  padding: 0 !important;
  overflow: hidden;
}
.about-page .about-cinematic .about-stage {
  width: min(1320px, calc(100% - 56px));
  margin: 0 auto;
  min-height: 100svh !important;
  display: grid;
  grid-template-columns: .86fr 1.14fr;
  align-items: center;
  gap: clamp(28px, 5vw, 80px);
}
.about-page .about-cinematic .about-image {
  width: 100% !important;
  height: min(680px, 74svh) !important;
  margin: 0 !important;
  grid-column: 2;
  grid-row: 1;
  border-radius: 34px !important;
  opacity: .86;
  filter: saturate(.88) contrast(1.04);
}
.about-page .about-cinematic .about-card {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  width: 100% !important;
  min-height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--jic-cream) !important;
  box-shadow: none !important;
  grid-column: 1;
  grid-row: 1;
}
.about-page .about-cinematic .about-card h2 {
  color: var(--jic-cream) !important;
  font-family: "Instrument Serif", Georgia, serif !important;
  font-size: clamp(4.1rem, 9vw, 8.2rem) !important;
  font-weight: 400 !important;
  line-height: .86 !important;
  letter-spacing: -.075em !important;
}
.about-page .about-cinematic .about-card .decor-line {
  background: var(--jic-sage) !important;
  width: 86px !important;
  height: 6px !important;
  opacity: .95 !important;
}
.about-page .about-cinematic .about-card p {
  max-width: 590px;
  color: rgba(239,233,220,.78) !important;
  font-size: clamp(1.1rem, 1.45vw, 1.35rem) !important;
  line-height: 1.7 !important;
}
.about-page .why-section {
  background: var(--jic-cream) !important;
  padding: clamp(96px, 8vw, 132px) 0 !important;
}
.about-page .why-section .section-header {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 64px;
  align-items: end;
  text-align: left;
}
.about-page .why-section .section-title {
  font-family: "Instrument Serif", Georgia, serif !important;
  font-size: clamp(3.2rem, 7vw, 7.2rem) !important;
  font-weight: 400 !important;
  line-height: .9 !important;
}
.about-page .why-section .section-intro {
  margin: 0 !important;
  max-width: 650px !important;
}
.about-page .why-grid {
  margin-top: 70px !important;
  gap: 22px !important;
}
.about-page .why-item {
  background: rgba(255,255,255,.42);
  border: 1px solid rgba(18,24,23,.08);
  border-radius: 30px;
  padding: 42px 34px;
}

/* Enquiries page hero: route-led, like a first-block contact journey */
.enquiries-page .contact-hero {
  background-color: var(--jic-ink) !important;
  min-height: 100svh !important;
  align-items: center !important;
}
.enquiries-page .contact-hero::before {
  background: linear-gradient(180deg, rgba(18,24,23,.76), rgba(18,24,23,.88)) !important;
}
.enquiries-page .contact-hero .hero-content {
  width: min(1240px, calc(100% - 56px)) !important;
  text-align: center;
  padding-top: 70px !important;
}
.enquiries-page .contact-hero h1 {
  font-size: clamp(4.3rem, 10vw, 10.8rem) !important;
}
.contact-path-grid {
  margin: clamp(38px, 5vw, 72px) auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.contact-path-grid a {
  min-height: 190px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px;
  border-radius: 28px;
  background: rgba(239,233,220,.9);
  color: var(--jic-ink);
  border: 1px solid rgba(255,255,255,.3);
  box-shadow: 0 22px 70px rgba(0,0,0,.24);
}
.contact-path-grid span {
  color: var(--jic-sage-dark);
  font-weight: 900;
  letter-spacing: .16em;
  font-size: .8rem;
}
.contact-path-grid strong {
  display: block;
  margin-top: auto;
  font-size: clamp(1.2rem, 1.55vw, 1.58rem);
  line-height: 1.05;
}
.contact-path-grid em {
  display: block;
  margin-top: 12px;
  font-style: normal;
  color: rgba(18,24,23,.64);
  line-height: 1.45;
}
.scroll-note {
  display: inline-block;
  margin-top: 42px;
  color: rgba(239,233,220,.64);
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 900;
}

/* Global enquiry block: footer-like campaign CTA, no menus, no extra block after copyright */
.luxe-final-cta {
  padding: clamp(84px, 9vw, 132px) 0 clamp(70px, 8vw, 110px) !important;
  background: var(--jic-ink) !important;
  color: var(--jic-cream) !important;
  text-align: left !important;
  border-radius: 0 !important;
}
.luxe-cta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: clamp(46px, 8vw, 150px);
  align-items: start;
}
.cta-kicker {
  color: rgba(239,233,220,.58);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 900;
  font-size: .84rem;
  margin-bottom: 20px;
}
.luxe-cta-left h2 {
  margin: 0;
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  letter-spacing: -.065em;
  line-height: .88;
  font-size: clamp(4rem, 9vw, 9.6rem);
  color: var(--jic-cream);
}
.btn-sage {
  margin-top: 34px !important;
  min-width: 0 !important;
  min-height: 58px !important;
  padding: 0 18px 0 24px !important;
  border-radius: 5px !important;
  background: var(--jic-sage) !important;
  color: var(--jic-ink) !important;
  gap: 14px;
}
.btn-sage span {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--jic-cream);
  background: var(--jic-ink);
  font-size: 1.4rem;
}
.cta-note {
  max-width: 560px !important;
  margin: 70px 0 0 !important;
  color: rgba(239,233,220,.72) !important;
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.35rem, 2.25vw, 2.2rem) !important;
  line-height: 1.22 !important;
}
.luxe-cta-right {
  display: grid;
  gap: 34px;
  padding-top: 10px;
}
.luxe-cta-right div {
  display: grid;
  gap: 8px;
}
.luxe-cta-right span {
  color: rgba(239,233,220,.66);
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .85rem;
}
.luxe-cta-right a,
.luxe-cta-right p {
  margin: 0;
  color: rgba(239,233,220,.86);
  font-weight: 700;
  line-height: 1.55;
}
.wa-square {
  width: 54px;
  height: 54px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(239,233,220,.28);
  border-radius: 8px;
  color: #25d366 !important;
}
.site-footer {
  background: var(--jic-ink) !important;
  color: rgba(239,233,220,.58) !important;
  border-top: 1px solid rgba(239,233,220,.1) !important;
  padding: 26px 16px !important;
}

/* Progressive enquiry form */
.form-panel[data-progressive] label.progress-step,
.form-panel[data-progressive] .form-actions,
.form-panel[data-progressive] .small-help {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  margin: 0 !important;
  pointer-events: none;
  transition: max-height .42s cubic-bezier(.22,1,.36,1), opacity .32s ease, transform .32s ease, margin .32s ease;
}
.form-panel[data-progressive].is-progressed label.progress-step,
.form-panel[data-progressive].is-progressed .form-actions,
.form-panel[data-progressive].is-progressed .small-help {
  max-height: 260px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  margin-top: 0 !important;
}

/* Full-screen booking overlay, not a page section */
.booking-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  align-items: center;
  background: rgba(18,24,23,.96);
  color: var(--jic-cream);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .34s ease, transform .34s ease;
}
.booking-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.booking-overlay-inner {
  width: min(1280px, calc(100% - 56px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.25fr .8fr;
  gap: clamp(34px, 7vw, 110px);
  align-items: center;
}
.booking-overlay h2 {
  margin: 0;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(4rem, 8vw, 8.5rem);
  line-height: .88;
  font-weight: 400;
  letter-spacing: -.07em;
}
.booking-overlay h2 em { font-style: italic; }
.booking-overlay .overlay-note {
  margin-top: 32px;
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  color: rgba(239,233,220,.72);
  font-size: clamp(1.3rem, 2vw, 2.05rem);
  line-height: 1.22;
}
.overlay-booking-options {
  display: grid;
  gap: 14px;
}
.overlay-booking-options a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  min-height: 92px;
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(239,233,220,.92);
  color: var(--jic-ink);
}
.overlay-booking-options b {
  font-size: clamp(1.2rem, 2vw, 1.72rem);
  line-height: 1;
}
.overlay-booking-options span:first-child {
  font-weight: 900;
  color: var(--jic-sage-dark);
}
.overlay-booking-options small {
  color: rgba(18,24,23,.58);
  font-weight: 800;
}
.booking-overlay-side {
  display: grid;
  gap: 32px;
  align-self: stretch;
  align-content: center;
}
.booking-overlay-side span {
  display: block;
  color: rgba(239,233,220,.58);
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: .08em;
  font-size: .84rem;
  margin-bottom: 8px;
}
.booking-overlay-side a,
.booking-overlay-side p { color: rgba(239,233,220,.88); font-weight: 800; margin: 0; line-height: 1.6; }
.booking-overlay-close {
  position: absolute;
  top: 26px;
  right: 26px;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(239,233,220,.25);
  border-radius: 999px;
  background: transparent;
  color: var(--jic-cream);
  cursor: pointer;
  font-size: 1.7rem;
}

/* WhatsApp mini with video */
.whatsapp-mini {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 3000;
  width: 210px;
  overflow: hidden;
  border-radius: 28px;
  background: var(--jic-ink);
  color: var(--jic-cream);
  box-shadow: 0 30px 80px rgba(0,0,0,.3);
  transition: width .32s ease, height .32s ease, border-radius .32s ease;
}
.whatsapp-mini.is-minimised { width: 62px; height: 62px; border-radius: 999px; }
.whatsapp-mini video { width: 100%; height: 122px; object-fit: cover; opacity: .83; }
.wa-mini-body { padding: 14px; }
.wa-mini-body strong { display: block; font-size: .92rem; line-height: 1.2; }
.wa-mini-body a { margin-top: 10px; display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 14px; border-radius: 999px; background: #25d366; color: #0b2415; font-weight: 900; }
.wa-mini-close,
.wa-mini-open { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: 0; border-radius: 999px; background: rgba(239,233,220,.9); color: var(--jic-ink); cursor: pointer; font-weight: 900; }
.wa-mini-open { inset: 0; width: 62px; height: 62px; background: #25d366; display: none; }
.whatsapp-mini.is-minimised video,
.whatsapp-mini.is-minimised .wa-mini-body,
.whatsapp-mini.is-minimised .wa-mini-close { display: none; }
.whatsapp-mini.is-minimised .wa-mini-open { display: block; }

/* Softer page flow */
body { background: linear-gradient(180deg, #f4efe5 0%, #f7f2e9 45%, #eee8dc 100%) !important; }
.services-summary, .why-section, .testimonials, .contact-form-section, .service-detail-section, .about-services-showcase, .services-work-strip, .booking-section { border: 0 !important; }
.about-overlap, .services-summary, .why-section, .contact-form-section, .booking-section { background: transparent !important; }

@media (max-width: 980px) {
  .site-header.reveal-header .nav-left,
  .site-header.reveal-header .nav-right { display: none !important; }
  .site-header.reveal-header .header-inner { grid-template-columns: auto 1fr auto !important; }
  .contact-path-grid, .luxe-cta-grid, .booking-overlay-inner, .about-page .about-cinematic .about-stage, .about-page .why-section .section-header { grid-template-columns: 1fr !important; }
  .about-page .about-cinematic .about-card, .about-page .about-cinematic .about-image { grid-column: 1 !important; grid-row: auto !important; }
  .about-page .about-cinematic .about-card { padding-top: 120px !important; }
  .contact-path-grid a { min-height: 142px; }
  .booking-overlay-inner { align-items: start; padding: 82px 0 40px; }
  .booking-overlay { overflow: auto; }
}
@media (max-width: 720px) {
  .site-header.reveal-header { inset-top: 10px !important; }
  .site-header.reveal-header .brand span { max-width: 214px; white-space: normal; }
  .site-header.reveal-header .brand-logo { width: 42px !important; height: 42px !important; }
  .whatsapp-mini { left: 14px; bottom: 14px; width: 178px; }
  .contact-path-grid { gap: 10px; }
  .luxe-cta-left h2 { font-size: clamp(3.35rem, 17vw, 5.6rem); }
}


/* V20 final premium SEO-ready polish */
:root {
  --jic-ink: #121817;
  --jic-cream: #efe9dc;
  --jic-sage: #9cab88;
  --jic-sage-dark: #7f8d70;
}

/* Loader: smaller, more editorial, with a letter-by-letter fade at same quick speed */
.preloader-inner { width: min(600px, calc(100% - 46px)) !important; }
.preloader-logo {
  width: clamp(86px, 9vw, 138px) !important;
  height: clamp(86px, 9vw, 138px) !important;
  opacity: 0;
  transform: translateY(10px) scale(.96);
  animation: loaderSoftIn .42s cubic-bezier(.22,1,.36,1) .04s forwards;
}
.preloader-brand {
  font-family: "Instrument Serif", Georgia, serif !important;
  font-size: clamp(1.95rem, 3.8vw, 4.1rem) !important;
  line-height: .92 !important;
  letter-spacing: -.055em !important;
  font-weight: 400 !important;
  color: rgba(239,233,220,.96) !important;
  opacity: 1 !important;
  transform: none !important;
  margin-top: 12px !important;
}
.preloader-brand .loader-letter {
  opacity: 0;
  transform: translateY(12px) rotate(.001deg);
  display: inline-block;
  animation: loaderLetter .45s cubic-bezier(.22,1,.36,1) forwards;
}
.preloader-tagline {
  font-family: "Instrument Serif", Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(1.08rem, 2.05vw, 2.05rem) !important;
  letter-spacing: -.025em !important;
  line-height: 1.02 !important;
  margin-top: 12px !important;
  color: rgba(239,233,220,.82) !important;
  text-transform: none !important;
  opacity: 0 !important;
  transform: translateY(12px) !important;
  transition: opacity .36s cubic-bezier(.22,1,.36,1), transform .36s cubic-bezier(.22,1,.36,1) !important;
}
.preloader.stage-50 .preloader-tagline,
.preloader.stage-90 .preloader-tagline { opacity: 1 !important; transform: translateY(0) !important; }
.preloader-line { width: min(320px, 70vw) !important; margin-top: 28px !important; }
@keyframes loaderSoftIn { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes loaderLetter { to { opacity: 1; transform: translateY(0); } }

/* Hidden-on-load nav with centred tabs, brand left, appointment action right */
.site-header.reveal-header,
.site-header.reveal-header.is-black {
  position: fixed !important;
  top: 18px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 6500 !important;
  background: transparent !important;
  color: var(--jic-cream) !important;
  transform: translateY(-150%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform .56s cubic-bezier(.22,1,.36,1), opacity .42s ease !important;
}
.site-header.reveal-header.is-visible,
.site-header.reveal-header:focus-within { transform: translateY(0) !important; opacity: 1 !important; pointer-events: auto !important; }
.site-header.reveal-header .header-inner {
  width: min(1240px, calc(100% - 30px)) !important;
  margin: 0 auto !important;
  min-height: 68px !important;
  grid-template-columns: minmax(250px, .9fr) auto minmax(220px, .9fr) !important;
  gap: 18px !important;
  padding: 7px !important;
  border: 1px solid rgba(239,233,220,.18) !important;
  border-radius: 999px !important;
  background: rgba(18,24,23,.72) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.24) !important;
  backdrop-filter: blur(24px) saturate(1.1) !important;
}
.site-header.reveal-header .brand {
  grid-column: 1 !important;
  justify-self: start !important;
  display: inline-flex !important;
  gap: 10px !important;
  color: var(--jic-cream) !important;
  font-size: clamp(1.3rem, 1.95vw, 2rem) !important;
  font-family: "Instrument Serif", Georgia, serif !important;
  line-height: .96 !important;
  letter-spacing: -.04em !important;
  padding-left: 4px !important;
}
.site-header.reveal-header .brand-logo { width: 48px !important; height: 48px !important; }
.site-header.reveal-header .nav-left {
  grid-column: 2 !important;
  justify-self: center !important;
  display: inline-flex !important;
  gap: 6px !important;
  padding: 5px !important;
  border-radius: 999px !important;
  background: rgba(239,233,220,.11) !important;
  border: 1px solid rgba(239,233,220,.12) !important;
}
.site-header.reveal-header .nav-right {
  grid-column: 3 !important;
  justify-self: end !important;
  display: inline-flex !important;
}
.site-header.reveal-header .nav-left a {
  min-height: 46px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: 0 !important;
  color: rgba(239,233,220,.84) !important;
  font-weight: 900 !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
}
.site-header.reveal-header .nav-left a.active {
  background: rgba(239,233,220,.9) !important;
  color: var(--jic-ink) !important;
}
.site-header.reveal-header .nav-booking-cta {
  min-height: 52px !important;
  padding: 0 16px 0 22px !important;
  border-radius: 8px !important;
  border: 0 !important;
  background: var(--jic-sage) !important;
  color: var(--jic-ink) !important;
  font-weight: 950 !important;
  letter-spacing: -.015em !important;
  display: inline-flex !important;
  align-items: center !important;
  cursor: pointer !important;
}
.site-header.reveal-header .nav-booking-cta::after {
  content: "›";
  width: 32px;
  height: 32px;
  margin-left: 12px;
  border-radius: 6px;
  color: var(--jic-cream);
  background: var(--jic-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}
.site-header.reveal-header .nav-left a:hover,
.site-header.reveal-header .nav-booking-cta:hover { background: var(--blue) !important; color: #fff !important; }
.site-header.reveal-header .menu-toggle { color: var(--jic-cream) !important; }

/* Hero refinements and removed label spacing */
.hero-kicker { display: none !important; }
.hero-video .hero-content { padding-top: clamp(92px, 9vw, 140px) !important; }
.services-page .hero-video .hero-content h1 { font-size: clamp(2.6rem, 5.9vw, 5.45rem) !important; }
.mobile-only-word { display: none; }

/* About text and hero feel */
.about-page .about-cinematic .about-card p { max-width: 680px !important; }
.about-page .about-cinematic .about-card h1,
.about-page .about-cinematic .about-card h2 { font-size: clamp(3.55rem, 8vw, 7.2rem) !important; }

/* About Why Choose Us as horizontal story scroll */
.about-page .why-story-scroll {
  min-height: 265vh !important;
  position: relative !important;
  overflow: clip !important;
  background: var(--jic-cream) !important;
  padding: 0 !important;
}
.about-page .why-story-scroll > .container {
  position: sticky !important;
  top: 92px !important;
  height: calc(100svh - 92px) !important;
  display: grid !important;
  align-content: center !important;
  overflow: hidden !important;
  padding: 44px 0 !important;
}
.about-page .why-story-scroll .section-header {
  display: grid !important;
  grid-template-columns: .8fr 1.2fr !important;
  align-items: end !important;
  gap: 44px !important;
  margin-bottom: 54px !important;
  text-align: left !important;
}
.about-page .why-story-scroll .section-title { font-family: "Instrument Serif", Georgia, serif !important; font-weight: 400 !important; letter-spacing: -.06em !important; }
.about-page .why-story-scroll .why-grid {
  display: flex !important;
  gap: 22px !important;
  width: max-content !important;
  will-change: transform !important;
  margin-top: 0 !important;
}
.about-page .why-story-scroll .why-item {
  flex: 0 0 min(430px, 74vw) !important;
  min-height: 430px !important;
  border-radius: 34px !important;
  padding: 42px 34px !important;
  background: rgba(255,255,255,.62) !important;
  border: 1px solid rgba(18,24,23,.08) !important;
  box-shadow: 0 26px 70px rgba(0,0,0,.08) !important;
}

/* See our work intro exact copy / spacing */
.home-page .work-scroll-head .section-intro { max-width: 820px !important; }

/* Enquiries page first block: contact routes as different devices on desktop */
.enquiries-page .contact-hero { background-color: var(--jic-ink) !important; min-height: 100svh !important; }
.enquiries-page .contact-hero::before { background: linear-gradient(180deg, rgba(18,24,23,.66), rgba(18,24,23,.88)) !important; }
.enquiries-page .contact-hero .hero-content { width: min(1300px, calc(100% - 56px)) !important; text-align: left !important; }
.enquiries-page .contact-hero h1 { max-width: 820px; font-size: clamp(4.1rem, 9.2vw, 10rem) !important; }
.enquiries-page .contact-hero p { margin-left: 0 !important; max-width: 760px !important; }
.contact-device-grid {
  position: relative !important;
  margin: clamp(34px, 6vw, 76px) 0 0 !important;
  height: min(430px, 42svh) !important;
  display: block !important;
}
.contact-device {
  position: absolute !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  color: var(--jic-ink) !important;
  background: rgba(239,233,220,.94) !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.30) !important;
  padding: 24px !important;
  min-height: auto !important;
  transition: transform .36s cubic-bezier(.22,1,.36,1), box-shadow .36s ease !important;
}
.contact-device:hover { transform: translateY(-8px) rotate(0deg) !important; box-shadow: 0 38px 100px rgba(0,0,0,.42) !important; }
.contact-device.route-1 { left: 0; top: 12px; width: min(410px, 32vw); height: 292px; border-radius: 30px; }
.contact-device.route-2 { left: 35%; top: 70px; width: 220px; height: 310px; border-radius: 34px; }
.contact-device.route-3 { right: 18%; top: 0; width: 360px; height: 230px; border-radius: 28px; }
.contact-device.route-4 { right: 0; bottom: 0; width: 390px; height: 260px; border-radius: 28px; }
.contact-device span { color: var(--jic-sage-dark) !important; font-weight: 950 !important; letter-spacing: .16em !important; }
.contact-device strong { display: block; font-size: clamp(1.3rem, 1.6vw, 1.75rem); line-height: 1.04; }
.contact-device em { display: block; font-style: normal; color: rgba(18,24,23,.62); line-height: 1.45; margin-top: 10px; }
.scroll-note { color: rgba(239,233,220,.66) !important; }

/* Progressive enquiry form: name first, visual progress button */
.form-panel[data-progressive] .form-actions { max-height: 140px !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
.form-panel [data-progress-button] {
  --progress: 0%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #111 !important;
  color: #fff !important;
}
.form-panel [data-progress-button]::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progress);
  background: var(--blue);
  z-index: -1;
  transition: width .28s ease;
}

/* Final CTA: smaller desktop, more Pieter-like footer CTA without extra menus */
.luxe-final-cta { padding: clamp(64px, 6vw, 92px) 0 clamp(58px, 5.5vw, 84px) !important; }
.luxe-cta-grid { align-items: center !important; }
.luxe-cta-left h2 { font-size: clamp(3.15rem, 6.8vw, 6.8rem) !important; line-height: .92 !important; }
.luxe-cta-left h2 br { display: block; content: ""; margin-bottom: .08em; }
.luxe-cta-left h2 em { display: inline-block; margin-top: .06em; }
.cta-note { margin-top: 34px !important; font-size: clamp(1.16rem, 1.8vw, 1.74rem) !important; }
.btn-sage { min-height: 52px !important; }

/* Desktop WhatsApp card: Pieter-like larger portrait card; mobile stays compact */
.whatsapp-mini {
  width: 298px !important;
  border-radius: 22px !important;
  background: var(--jic-ink) !important;
  box-shadow: 0 32px 90px rgba(0,0,0,.34) !important;
}
.whatsapp-mini video { height: 180px !important; object-position: center !important; }
.wa-mini-body { padding: 18px !important; }
.wa-mini-body strong { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: 1.55rem !important; letter-spacing: -.035em; }
.whatsapp-mini.is-minimised { width: 62px !important; height: 62px !important; border-radius: 999px !important; }

/* Booking overlay mobile detail fixes */
.booking-overlay h2 em { display: inline-block; margin-top: .08em; }
.booking-overlay-side div:first-child a { display: block; }

/* Mobile scroll behaviours */
@media (max-width: 980px) {
  .site-header.reveal-header .header-inner { grid-template-columns: auto 1fr auto !important; }
  .site-header.reveal-header .nav-left,
  .site-header.reveal-header .nav-right { display: none !important; }
  .site-header.reveal-header .brand { grid-column: 1 !important; }
  .site-header.reveal-header .menu-toggle { display: inline-flex !important; align-items: center; justify-content: center; }
}
@media (max-width: 760px) {
  .preloader-logo { width: 104px !important; height: 104px !important; }
  .preloader-brand { font-size: clamp(1.85rem, 9vw, 3.1rem) !important; }
  .preloader-tagline { font-size: clamp(1.05rem, 5.8vw, 1.55rem) !important; margin-top: 10px !important; }
  .desktop-inline { display: none; }
  .mobile-only-word { display: inline; }
  .home-page .hero-content h1.hero-title-delay { font-size: clamp(3.05rem, 15vw, 5.7rem) !important; line-height: .9 !important; }

  /* Home About: horizontal snap cards */
  .home-page .about-overlap { padding: 72px 0 86px !important; }
  .home-page .about-stage {
    min-height: auto !important;
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 86vw !important;
    gap: 18px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    padding-bottom: 18px !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .home-page .about-image,
  .home-page .about-card {
    position: relative !important;
    width: 100% !important;
    left: auto !important;
    bottom: auto !important;
    min-height: 500px !important;
    height: 500px !important;
    scroll-snap-align: center !important;
    border-radius: 30px !important;
  }
  .home-page .about-card { padding: 38px 28px !important; }

  /* Stack-up service panels on mobile */
  .home-page .services-pin,
  .services-page .service-image-pin { min-height: auto !important; }
  .home-page .services-pin-grid,
  .services-page .service-image-pin .services-pin-grid { display: block !important; padding: 72px 0 90px !important; }
  .home-page .services-pin-left,
  .services-page .service-image-pin .services-pin-left { position: relative !important; top: auto !important; min-height: auto !important; margin-bottom: 28px !important; }
  .home-page .services-pin-stack,
  .services-page .service-image-pin .services-pin-stack { display: block !important; padding: 0 0 30px !important; }
  .home-page .services-pin-stack .service-panel,
  .services-page .service-image-pin .service-panel {
    position: sticky !important;
    top: 96px !important;
    min-height: 70svh !important;
    margin-bottom: 22px !important;
    transform-origin: top center !important;
  }
  .home-page .services-pin-stack .service-panel:nth-child(2),
  .services-page .service-image-pin .service-panel:nth-child(2) { top: 108px !important; }
  .home-page .services-pin-stack .service-panel:nth-child(3),
  .services-page .service-image-pin .service-panel:nth-child(3) { top: 120px !important; }
  .home-page .services-pin-stack .service-panel:nth-child(4),
  .services-page .service-image-pin .service-panel:nth-child(4) { top: 132px !important; }

  /* Home work cards: horizontal step-style mobile track and no trailing whitespace */
  .home-page .work-scroll-section { min-height: auto !important; padding-bottom: 70px !important; }
  .home-page .work-sticky { position: static !important; height: auto !important; overflow-x: auto !important; padding-left: 0 !important; padding-bottom: 18px !important; scroll-snap-type: x mandatory !important; }
  .home-page .work-track { gap: 16px !important; padding: 0 24px 0 0 !important; transform: none !important; }
  .home-page .work-slide { flex: 0 0 84vw !important; scroll-snap-align: center !important; min-height: 510px !important; height: 510px !important; }

  /* Testimonials as swipe cards */
  .testimonial-grid { display: flex !important; overflow-x: auto !important; gap: 16px !important; scroll-snap-type: x mandatory !important; padding-bottom: 18px !important; }
  .testimonial { flex: 0 0 82vw !important; scroll-snap-align: center !important; }

  /* Services residential/commercial cards: remove blank vertical space and hint horizontal scroll */
  .services-page .services-work-strip { min-height: auto !important; padding: 70px 0 78px !important; }
  .services-page .service-strip-sticky { position: static !important; height: auto !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; }
  .services-page .service-horizontal-track { transform: none !important; gap: 16px !important; padding-right: 26px !important; }
  .services-page .service-work-slide { flex: 0 0 82vw !important; height: 520px !important; min-height: 520px !important; scroll-snap-align: center !important; }
  .services-page .services-work-strip .container { position: relative; }
  .services-page .services-work-strip .section-header::after {
    content: "Swipe →";
    display: inline-flex;
    margin-top: 18px;
    padding: 8px 13px;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
    color: rgba(255,255,255,.86);
    font-size: .82rem;
    font-weight: 900;
    letter-spacing: .04em;
  }

  /* Enquiries mobile: hero first, then contact routes as stacked cards */
  .enquiries-page .contact-hero .hero-content { text-align: left !important; padding-top: 128px !important; }
  .enquiries-page .contact-hero h1 { font-size: clamp(3.65rem, 18vw, 6.2rem) !important; }
  .contact-device-grid { height: auto !important; display: grid !important; gap: 18px !important; margin-top: 56px !important; }
  .contact-device { position: sticky !important; top: 94px !important; width: auto !important; height: auto !important; min-height: 260px !important; border-radius: 30px !important; transform: none !important; }
  .contact-device.route-2 { top: 106px !important; }
  .contact-device.route-3 { top: 118px !important; }
  .contact-device.route-4 { top: 130px !important; }
  .booking-section .booking-stack { display: flex !important; overflow-x: auto !important; gap: 16px !important; scroll-snap-type: x mandatory !important; padding-bottom: 18px !important; }
  .booking-section .booking-panel { flex: 0 0 84vw !important; position: relative !important; top: auto !important; min-height: 500px !important; scroll-snap-align: center !important; }

  /* Last CTA mobile spacing */
  .luxe-cta-left h2 { line-height: .96 !important; }
  .luxe-cta-left h2 em { margin-top: .11em !important; }
  .luxe-final-cta { padding: 62px 0 70px !important; }

  .booking-overlay h2 { line-height: .96 !important; }
  .booking-overlay h2 em { margin-top: .16em !important; }
  .overlay-booking-options span:first-child { line-height: 1.08; }
  .overlay-booking-options a:nth-child(2) span:first-child,
  .overlay-booking-options a:nth-child(3) span:first-child { white-space: pre-line; }

  /* Mobile WhatsApp keeps compact behaviour */
  .whatsapp-mini { width: 178px !important; border-radius: 26px !important; }
  .whatsapp-mini video { height: 122px !important; }
  .wa-mini-body strong { font-family: var(--font) !important; font-weight: 800 !important; font-size: .92rem !important; letter-spacing: 0 !important; }
}


/* =========================
   V21 FINAL REBUILD OVERRIDES
   Brand palette: deep charcoal, muted stone, muted taupe, soft off-white.
   ========================= */
:root {
  --brand-deep-charcoal: #111715;
  --brand-stone: #A8B395;
  --brand-stone-dark: #8F9C7E;
  --brand-taupe: #9A8E7F;
  --brand-soft-white: #F3EFE6;
  --brand-paper: #EFE9DD;
  --brand-ink: #101412;
  --cta-bg: var(--brand-stone);
  --cta-hover: var(--brand-taupe);
  --cta-text: var(--brand-ink);
  --cta-hover-text: var(--brand-soft-white);
}

/* All CTAs coordinated to the brand colour system */
.btn,
.btn.btn-dark,
.btn.btn-blue,
.btn.btn-sage,
button.btn,
.work-modal-actions .btn,
.nav-booking-cta,
.mobile-booking-cta,
.booking-mobile-launch,
.route-cta {
  background: var(--cta-bg) !important;
  border-color: var(--cta-bg) !important;
  color: var(--cta-text) !important;
  box-shadow: none !important;
}
.btn:hover,
.btn:focus-visible,
button.btn:hover,
button.btn:focus-visible,
.work-modal-actions .btn:hover,
.work-modal-actions .btn:focus-visible,
.nav-booking-cta:hover,
.nav-booking-cta:focus-visible,
.mobile-booking-cta:hover,
.mobile-booking-cta:focus-visible,
.booking-mobile-launch:hover,
.booking-mobile-launch:focus-visible,
.route-cta:hover,
.route-cta:focus-visible {
  background: var(--cta-hover) !important;
  border-color: var(--cta-hover) !important;
  color: var(--cta-hover-text) !important;
}
.menu-toggle {
  background: var(--brand-stone) !important;
  color: var(--brand-ink) !important;
  border: 1px solid rgba(17,23,21,.16) !important;
}

/* Loader: logo remains, company name spells/fades, all text softens in at the same site speed */
.preloader {
  background: radial-gradient(circle at 50% 28%, rgba(168,179,149,.16), transparent 34%), var(--brand-deep-charcoal) !important;
}
.preloader-inner {
  width: min(520px, calc(100% - 52px)) !important;
}
.preloader-logo {
  opacity: 1 !important;
  transform: none !important;
  width: clamp(92px, 10vw, 138px) !important;
  height: auto !important;
  margin: 0 auto 24px !important;
}
.preloader-brand {
  opacity: 1 !important;
  transform: none !important;
  font-family: "Instrument Serif", Georgia, serif !important;
  font-size: clamp(1.85rem, 4vw, 3.7rem) !important;
  line-height: .94 !important;
  letter-spacing: -.045em !important;
  color: var(--brand-soft-white) !important;
}
.loader-letter {
  opacity: 0;
  transform: translateY(11px);
  display: inline-block;
  animation: loaderLetter .42s cubic-bezier(.22,1,.36,1) forwards !important;
}
.preloader-tagline {
  font-family: "Instrument Serif", Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: -.015em !important;
  font-size: clamp(1.06rem, 1.75vw, 1.72rem) !important;
  line-height: 1.02 !important;
  color: rgba(243,239,230,.82) !important;
  opacity: 0 !important;
  transform: translateY(10px) !important;
  transition: opacity .42s cubic-bezier(.22,1,.36,1), transform .42s cubic-bezier(.22,1,.36,1) !important;
}
.preloader.stage-50 .preloader-tagline,
.preloader.stage-90 .preloader-tagline {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.preloader-line {
  width: min(270px, 64vw) !important;
  margin: 24px auto 0 !important;
  background: rgba(243,239,230,.16) !important;
}
.preloader-line span {
  background: linear-gradient(90deg, var(--brand-stone), var(--brand-soft-white)) !important;
}

/* Header: genuinely hidden on load; compact, Pieter-like, centred nav when visible */
.site-header.reveal-header {
  position: fixed !important;
  top: 18px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 5600 !important;
  background: transparent !important;
  color: var(--brand-soft-white) !important;
  transform: translateY(-140%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform .48s cubic-bezier(.22,1,.36,1), opacity .48s cubic-bezier(.22,1,.36,1) !important;
}
.site-header.reveal-header.is-visible,
.site-header.reveal-header:focus-within {
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.site-header.reveal-header .header-inner {
  width: min(1240px, calc(100% - 38px)) !important;
  min-height: 74px !important;
  max-height: 74px !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 8px 10px !important;
  margin: 0 auto !important;
  border-radius: 999px !important;
  background: rgba(17,23,21,.78) !important;
  border: 1px solid rgba(243,239,230,.12) !important;
  box-shadow: 0 18px 54px rgba(0,0,0,.18) !important;
  backdrop-filter: blur(20px) !important;
}
.site-header.reveal-header .brand {
  grid-column: 1 !important;
  justify-self: start !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 0 0 0 8px !important;
  color: var(--brand-soft-white) !important;
  font-family: "Instrument Serif", Georgia, serif !important;
  font-size: clamp(1.15rem, 1.55vw, 1.62rem) !important;
  line-height: .95 !important;
  letter-spacing: -.04em !important;
  white-space: nowrap !important;
}
.site-header.reveal-header .brand-logo {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
}
.site-header.reveal-header .nav-left {
  grid-column: 2 !important;
  justify-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-height: 56px !important;
  padding: 5px !important;
  border-radius: 999px !important;
  background: rgba(243,239,230,.09) !important;
  border: 1px solid rgba(243,239,230,.11) !important;
}
.site-header.reveal-header .nav-left a {
  min-height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 23px !important;
  border-radius: 999px !important;
  color: rgba(243,239,230,.76) !important;
  font-size: .92rem !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
}
.site-header.reveal-header .nav-left a.active,
.site-header.reveal-header .nav-left a:hover,
.site-header.reveal-header .nav-left a:focus-visible {
  background: var(--brand-soft-white) !important;
  color: var(--brand-ink) !important;
}
.site-header.reveal-header .nav-right {
  grid-column: 3 !important;
  justify-self: end !important;
  display: flex !important;
}
.site-header.reveal-header .nav-booking-cta {
  min-height: 54px !important;
  padding: 0 17px 0 24px !important;
  border-radius: 14px !important;
  font-size: .92rem !important;
  font-weight: 900 !important;
  display: inline-flex !important;
  gap: 18px !important;
  align-items: center !important;
}
.site-header.reveal-header .nav-booking-cta::after {
  content: "›";
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: inline-grid;
  place-items: center;
  background: var(--brand-deep-charcoal);
  color: var(--brand-soft-white);
  font-size: 2rem;
  line-height: 1;
}
.site-header.reveal-header .menu-toggle {
  grid-column: 3 !important;
  justify-self: end !important;
}

/* Desktop WhatsApp: transparent Pieter-style video card; mobile styles kept compact below */
.whatsapp-mini {
  position: fixed !important;
  z-index: 1700 !important;
  left: 22px !important;
  bottom: 22px !important;
  width: 322px !important;
  height: 438px !important;
  border-radius: 32px !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--brand-soft-white) !important;
  transition: width .32s ease, height .32s ease, transform .32s ease, opacity .32s ease !important;
}
.whatsapp-mini video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 32px !important;
  box-shadow: 0 30px 86px rgba(0,0,0,.26) !important;
  opacity: .92 !important;
}
.whatsapp-mini::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 32px;
  background: linear-gradient(180deg, rgba(17,23,21,.04) 20%, rgba(17,23,21,.72) 100%);
  pointer-events: none;
}
.whatsapp-mini .wa-mini-body {
  position: absolute !important;
  z-index: 2 !important;
  left: 18px !important;
  right: 18px !important;
  bottom: 18px !important;
  padding: 0 !important;
}
.whatsapp-mini .wa-mini-body strong {
  display: block;
  font-family: "Instrument Serif", Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: -.035em !important;
  font-size: 1.86rem !important;
  line-height: .92 !important;
  color: var(--brand-soft-white) !important;
}
.whatsapp-mini .wa-mini-body a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 44px !important;
  margin-top: 14px !important;
  padding: 0 16px !important;
  border-radius: 12px !important;
  background: rgba(243,239,230,.86) !important;
  color: var(--brand-ink) !important;
  font-size: .88rem !important;
  font-weight: 900 !important;
}
.whatsapp-mini .wa-mini-close {
  position: absolute !important;
  z-index: 3 !important;
  top: 14px !important;
  right: 14px !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(243,239,230,.28) !important;
  background: rgba(243,239,230,.62) !important;
  color: var(--brand-ink) !important;
}
.whatsapp-mini.is-minimised {
  width: 64px !important;
  height: 64px !important;
  border-radius: 999px !important;
}
.whatsapp-mini.is-minimised video,
.whatsapp-mini.is-minimised::after,
.whatsapp-mini.is-minimised .wa-mini-body,
.whatsapp-mini.is-minimised .wa-mini-close {
  display: none !important;
}
.whatsapp-mini .wa-mini-open {
  display: none;
}
.whatsapp-mini.is-minimised .wa-mini-open {
  display: grid !important;
  place-items: center !important;
  width: 64px !important;
  height: 64px !important;
  inset: 0 !important;
  border-radius: 999px !important;
  background: var(--brand-stone) !important;
  color: var(--brand-ink) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.2);
}

/* Less harsh page segmentation: soft continuous canvas */
body {
  background: linear-gradient(180deg, var(--brand-paper), #f7f3ea 36%, #eee7da 100%) !important;
}
section {
  scroll-margin-top: 110px;
}
.services-summary,
.why-section,
.testimonials,
.contact-form-section,
.service-detail-section,
.about-services-showcase,
.services-work-strip,
.enquiry-cta-section,
.portfolio-section,
.dark-band,
.booking-section {
  border-top: 0 !important;
  border-bottom: 0 !important;
}
.about-overlap {
  padding-bottom: clamp(38px, 4vw, 64px) !important;
}
.home-page .services-summary {
  padding-top: clamp(44px, 5vw, 72px) !important;
}
.home-page .about-overlap + .services-summary {
  margin-top: -18px !important;
}
.luxe-final-cta {
  margin-top: -1px !important;
  padding: clamp(54px, 6vw, 86px) 0 clamp(58px, 6vw, 90px) !important;
  background: var(--brand-deep-charcoal) !important;
  border-radius: clamp(34px, 5vw, 74px) clamp(34px, 5vw, 74px) 0 0 !important;
}
.luxe-cta-left h2 {
  font-size: clamp(2.7rem, 5.2vw, 5.6rem) !important;
  line-height: .88 !important;
  letter-spacing: -.055em !important;
}
.luxe-cta-left h2 em {
  margin-top: .08em !important;
  display: inline-block !important;
}
.luxe-cta-right div span + p {
  margin-top: 6px !important;
}

/* Enquiries hero: contact routes as layered screens, close to the Pieter how-it-works interaction model */
.enquiries-page .contact-hero {
  min-height: 118vh !important;
  padding: 120px 0 80px !important;
  background-color: var(--brand-paper) !important;
  color: var(--brand-ink) !important;
  border-radius: 0 0 clamp(34px, 6vw, 86px) clamp(34px, 6vw, 86px) !important;
}
.enquiries-page .contact-hero::before {
  opacity: .16 !important;
  background: linear-gradient(180deg, rgba(243,239,230,.92), rgba(239,233,220,.8)) !important;
}
.enquiries-page .contact-hero .hero-content {
  position: relative !important;
  z-index: 2 !important;
  width: min(1180px, calc(100% - 64px)) !important;
  min-height: 760px !important;
  display: grid !important;
  grid-template-columns: minmax(340px, .86fr) minmax(520px, 1.14fr) !important;
  grid-template-areas:
    "title cards"
    "copy cards"
    "scroll cards" !important;
  align-content: center !important;
  gap: 18px 58px !important;
  margin: 0 auto !important;
  text-align: left !important;
}
.enquiries-page .contact-hero h1 {
  grid-area: title !important;
  align-self: end !important;
  font-family: "Instrument Serif", Georgia, serif !important;
  font-size: clamp(4.2rem, 8.4vw, 9.8rem) !important;
  line-height: .82 !important;
  color: var(--brand-ink) !important;
  max-width: 7ch !important;
}
.enquiries-page .contact-hero p {
  grid-area: copy !important;
  max-width: 560px !important;
  color: rgba(17,23,21,.66) !important;
  font-size: clamp(1.05rem, 1.55vw, 1.45rem) !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}
.enquiries-page .scroll-note {
  grid-area: scroll !important;
  color: rgba(17,23,21,.6) !important;
  margin-top: 22px !important;
  display: inline-flex !important;
}
.contact-device-grid {
  grid-area: cards !important;
  position: relative !important;
  height: 650px !important;
  display: block !important;
  margin: 0 !important;
}
.contact-device {
  position: absolute !important;
  width: min(470px, 90%) !important;
  min-height: 330px !important;
  border-radius: 34px !important;
  padding: 28px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  background: rgba(255,255,255,.76) !important;
  color: var(--brand-ink) !important;
  border: 1px solid rgba(17,23,21,.08) !important;
  box-shadow: 0 30px 90px rgba(17,23,21,.13) !important;
  backdrop-filter: blur(10px);
}
.contact-device.route-1 { top: 0 !important; right: 11% !important; transform: rotate(-3deg) !important; z-index: 4; }
.contact-device.route-2 { top: 130px !important; left: 0 !important; transform: rotate(2deg) !important; z-index: 3; }
.contact-device.route-3 { top: 270px !important; right: 0 !important; transform: rotate(-1deg) !important; z-index: 2; }
.contact-device.route-4 { top: 410px !important; left: 12% !important; transform: rotate(2.5deg) !important; z-index: 1; }
.contact-device span:first-child {
  color: var(--brand-stone-dark) !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
  font-size: .8rem !important;
}
.contact-device strong {
  display: block !important;
  font-family: "Instrument Serif", Georgia, serif !important;
  font-size: clamp(2.1rem, 4vw, 4.2rem) !important;
  line-height: .86 !important;
  letter-spacing: -.052em !important;
}
.contact-device em {
  display: block !important;
  color: rgba(17,23,21,.62) !important;
  font-style: normal !important;
  line-height: 1.45 !important;
  font-size: 1rem !important;
}
.contact-device .route-cta {
  width: fit-content !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  padding: 0 16px !important;
  font-size: .84rem !important;
  font-weight: 900 !important;
}

/* Fancy field-by-field enquiry form */
.form-panel[data-step-progress] {
  position: relative !important;
  overflow: hidden !important;
}
.form-panel[data-step-progress] label[data-form-step] {
  max-height: 0;
  opacity: 0;
  transform: translateY(-12px);
  overflow: hidden;
  pointer-events: none;
  transition: max-height .48s cubic-bezier(.22,1,.36,1), opacity .34s ease, transform .34s ease, margin .34s ease;
  margin: 0 !important;
}
.form-panel[data-step-progress] label[data-form-step].is-step-visible {
  max-height: 190px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  margin-bottom: 18px !important;
}
.form-panel[data-step-progress] label[data-form-step].is-step-visible:has(textarea) {
  max-height: 300px;
}
.form-panel[data-step-progress] .form-actions,
.form-panel[data-step-progress] .small-help {
  max-height: none !important;
  opacity: 1 !important;
  transform: none !important;
  overflow: visible !important;
}
.form-panel [data-progress-button] {
  --progress: 0%;
  position: relative !important;
  isolation: isolate;
  overflow: hidden;
  opacity: 1 !important;
}
.form-panel [data-progress-button]::before {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--progress);
  background: rgba(17,23,21,.18);
  z-index: -1;
  transition: width .35s cubic-bezier(.22,1,.36,1);
}
.form-panel [data-progress-button]:disabled {
  cursor: not-allowed;
  filter: saturate(.86);
  opacity: .92 !important;
}

/* About page "Why Choose Us" desktop: Pieter-style sticky horizontal story cards */
.about-page .why-section.why-story-scroll {
  min-height: 265vh !important;
  padding: 0 !important;
  background: linear-gradient(180deg, #f7f3ea, #efe8dc) !important;
}
.about-page .why-section.why-story-scroll .container {
  position: sticky !important;
  top: 118px !important;
  width: min(1280px, calc(100% - 64px)) !important;
  height: calc(100vh - 150px) !important;
  display: grid !important;
  grid-template-columns: minmax(300px, 400px) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 52px !important;
  overflow: hidden !important;
}
.about-page .why-section.why-story-scroll .section-title,
.about-page .why-section.why-story-scroll .section-intro {
  grid-column: 1 !important;
}
.about-page .why-section.why-story-scroll .section-title {
  font-size: clamp(3.6rem, 6vw, 7rem) !important;
  line-height: .86 !important;
  text-align: left !important;
  margin: 0 !important;
}
.about-page .why-section.why-story-scroll .section-intro {
  text-align: left !important;
  margin: 18px 0 0 !important;
  max-width: 360px !important;
}
.about-page .why-section.why-story-scroll .why-grid {
  grid-column: 2 !important;
  display: flex !important;
  align-items: stretch !important;
  gap: 22px !important;
  width: max-content !important;
  transform: translate3d(0,0,0);
  will-change: transform;
}
.about-page .why-section.why-story-scroll .why-item {
  width: min(470px, 36vw) !important;
  min-height: 540px !important;
  flex: 0 0 min(470px, 36vw) !important;
  border-radius: 34px !important;
  background: rgba(255,255,255,.78) !important;
  box-shadow: 0 24px 70px rgba(17,23,21,.1) !important;
  border: 1px solid rgba(17,23,21,.08) !important;
}

/* Services page hero headline refinement */
.services-page .hero-video .hero-content h1,
.services-page .hero-content h1 {
  font-size: clamp(3.05rem, 6.4vw, 6.8rem) !important;
}

/* Mobile systems */
@media (max-width: 980px) {
  /* header compact mobile, hidden until scroll; menu button uses brand colours */
  .site-header.reveal-header {
    top: 10px !important;
  }
  .site-header.reveal-header .header-inner {
    width: min(100% - 24px, 720px) !important;
    min-height: 64px !important;
    max-height: 64px !important;
    grid-template-columns: auto 1fr auto !important;
    padding: 7px !important;
  }
  .site-header.reveal-header .brand {
    grid-column: 1 / 3 !important;
    font-size: 1.12rem !important;
    max-width: calc(100vw - 118px) !important;
    overflow: hidden !important;
  }
  .site-header.reveal-header .brand-logo {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
  }
  .site-header.reveal-header .nav-left,
  .site-header.reveal-header .nav-right {
    display: none !important;
  }
  .site-header.reveal-header .menu-toggle {
    display: inline-grid !important;
    place-items: center !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 999px !important;
  }

  /* mobile loader: logo and name first, tagline fades in; same speed */
  .preloader-logo {
    width: 92px !important;
    margin-bottom: 18px !important;
  }
  .preloader-brand {
    font-size: clamp(1.5rem, 8vw, 2.35rem) !important;
  }
  .preloader-tagline {
    font-size: clamp(1.02rem, 5vw, 1.42rem) !important;
    margin-top: 10px !important;
  }

  /* keep WhatsApp mobile compact exactly in spirit */
  .whatsapp-mini {
    width: 178px !important;
    height: auto !important;
    border-radius: 26px !important;
    overflow: hidden !important;
    background: var(--brand-deep-charcoal) !important;
    left: 14px !important;
    bottom: 14px !important;
    box-shadow: 0 22px 54px rgba(0,0,0,.24) !important;
  }
  .whatsapp-mini::after {
    display: none !important;
  }
  .whatsapp-mini video {
    height: 122px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .whatsapp-mini .wa-mini-body {
    position: static !important;
    padding: 14px !important;
  }
  .whatsapp-mini .wa-mini-body strong {
    font-family: var(--font) !important;
    font-size: .92rem !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
  }
  .whatsapp-mini .wa-mini-body a {
    min-height: 38px !important;
    margin-top: 10px !important;
    border-radius: 999px !important;
    padding: 0 13px !important;
  }
  .whatsapp-mini.is-minimised {
    width: 62px !important;
    height: 62px !important;
    border-radius: 999px !important;
  }

  /* mobile home: stack-style scroll, no swipe-only treatment */
  .home-page .about-overlap {
    padding-bottom: 26px !important;
  }
  .home-page .about-stage {
    display: grid !important;
    gap: 18px !important;
    min-height: auto !important;
  }
  .home-page .about-card,
  .home-page .about-image {
    width: 100% !important;
    height: auto !important;
    min-height: 420px !important;
    position: sticky !important;
    top: 88px !important;
    border-radius: 30px !important;
  }
  .home-page .about-image {
    top: 104px !important;
  }

  .home-page .services-pin-grid,
  .services-page .service-image-pin .services-pin-grid {
    display: block !important;
    padding: 62px 0 82px !important;
  }
  .home-page .services-pin-stack,
  .services-page .service-image-pin .services-pin-stack {
    display: block !important;
    padding-bottom: 12px !important;
  }
  .home-page .services-pin-stack .service-panel,
  .services-page .service-image-pin .service-panel {
    position: sticky !important;
    top: 88px !important;
    min-height: 68svh !important;
    margin-bottom: 22px !important;
    border-radius: 32px !important;
  }
  .home-page .services-pin-stack .service-panel:nth-child(2),
  .services-page .service-image-pin .service-panel:nth-child(2) { top: 100px !important; }
  .home-page .services-pin-stack .service-panel:nth-child(3),
  .services-page .service-image-pin .service-panel:nth-child(3) { top: 112px !important; }
  .home-page .services-pin-stack .service-panel:nth-child(4),
  .services-page .service-image-pin .service-panel:nth-child(4) { top: 124px !important; }

  /* See Our Work: vertical step-card scroll; no trailing blank space */
  .home-page .work-scroll-section {
    min-height: auto !important;
    height: auto !important;
    padding: 70px 0 54px !important;
  }
  .home-page .work-sticky {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
  }
  .home-page .work-track {
    display: block !important;
    transform: none !important;
    padding: 0 !important;
  }
  .home-page .work-slide {
    width: 100% !important;
    height: 68svh !important;
    min-height: 520px !important;
    margin-bottom: 18px !important;
    position: sticky !important;
    top: 88px !important;
    border-radius: 32px !important;
  }
  .home-page .work-slide:nth-child(2) { top: 100px !important; }
  .home-page .work-slide:nth-child(3) { top: 112px !important; }
  .home-page .work-slide:nth-child(4) { top: 124px !important; }
  .home-page .work-slide:nth-child(5) { top: 136px !important; }
  .home-page .work-slide:nth-child(6) { top: 148px !important; }

  /* Testimonials: sticky, stack-up behaviour */
  .testimonial-grid {
    display: block !important;
    overflow: visible !important;
    padding-bottom: 12px !important;
  }
  .testimonial {
    position: sticky !important;
    top: 92px !important;
    min-height: 260px !important;
    margin-bottom: 18px !important;
    border-radius: 28px !important;
    background: rgba(255,255,255,.72) !important;
  }
  .testimonial:nth-child(2) { top: 104px !important; }
  .testimonial:nth-child(3) { top: 116px !important; }
  .testimonial:nth-child(4) { top: 128px !important; }
  .testimonial:nth-child(5) { top: 140px !important; }

  /* Services residential/commercial: remove blank vertical space + visual arrow not text */
  .services-page .services-work-strip {
    min-height: auto !important;
    height: auto !important;
    padding: 62px 0 56px !important;
  }
  .services-page .services-work-strip + .services-work-strip {
    padding-top: 42px !important;
  }
  .services-page .service-strip-sticky {
    position: static !important;
    height: auto !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none;
  }
  .services-page .service-strip-sticky::-webkit-scrollbar { display: none; }
  .services-page .service-horizontal-track {
    transform: none !important;
    gap: 16px !important;
    padding: 0 48px 0 0 !important;
  }
  .services-page .service-work-slide {
    flex: 0 0 82vw !important;
    height: 520px !important;
    min-height: 520px !important;
    scroll-snap-align: center !important;
  }
  .services-page .services-work-strip .section-header::after {
    content: "" !important;
    position: absolute !important;
    right: 24px !important;
    bottom: -16px !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 999px !important;
    background: rgba(243,239,230,.18) !important;
    border: 1px solid rgba(243,239,230,.22) !important;
    backdrop-filter: blur(12px) !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.18) !important;
  }
  .services-page .services-work-strip .section-header::before {
    content: "‹  ›" !important;
    position: absolute !important;
    right: 36px !important;
    bottom: 2px !important;
    z-index: 3 !important;
    color: rgba(243,239,230,.92) !important;
    font-weight: 900 !important;
    font-size: 1.08rem !important;
    letter-spacing: .08em !important;
  }

  /* Mobile enquiries: first only title/subtext, then contact route cards as stack. */
  .mobile-contact-eyebrow {
    display: block !important;
    margin-bottom: 18px !important;
    text-transform: uppercase !important;
    letter-spacing: .16em !important;
    font-size: .72rem !important;
    font-weight: 900 !important;
    color: rgba(17,23,21,.58) !important;
    text-align: center !important;
  }
  .enquiries-page .contact-hero {
    min-height: auto !important;
    padding: 114px 0 58px !important;
  }
  .enquiries-page .contact-hero .hero-content {
    display: block !important;
    width: min(100% - 34px, 520px) !important;
    min-height: auto !important;
    padding: 0 !important;
    text-align: left !important;
  }
  .enquiries-page .contact-hero h1 {
    text-align: center !important;
    max-width: none !important;
    font-size: clamp(3.3rem, 17vw, 5.9rem) !important;
    line-height: .86 !important;
    margin: 0 auto 18px !important;
  }
  .enquiries-page .contact-hero p {
    text-align: left !important;
    max-width: 100% !important;
    font-size: 1.06rem !important;
    line-height: 1.6 !important;
    margin-bottom: 54px !important;
  }
  .contact-device-grid {
    height: auto !important;
    display: block !important;
    overflow: visible !important;
  }
  .contact-device {
    position: sticky !important;
    top: 86px !important;
    width: 100% !important;
    min-height: 62svh !important;
    margin-bottom: 18px !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    border-radius: 32px !important;
  }
  .contact-device.route-2 { top: 98px !important; }
  .contact-device.route-3 { top: 110px !important; }
  .contact-device.route-4 { top: 122px !important; }
  .contact-device strong {
    font-size: clamp(2.6rem, 13vw, 4.6rem) !important;
  }

  /* Booking block: single CTA first; cards live in overlay */
  .booking-section .booking-mobile-launch {
    display: inline-flex !important;
    margin-top: 18px !important;
  }
  .booking-section .booking-stack {
    display: none !important;
  }
  .booking-overlay-inner {
    width: min(100% - 24px, 620px) !important;
    padding: 22px !important;
    border-radius: 30px !important;
  }
  .overlay-booking-options {
    display: flex !important;
    overflow-x: auto !important;
    gap: 14px !important;
    scroll-snap-type: x mandatory !important;
    padding-bottom: 16px !important;
  }
  .overlay-booking-options a {
    flex: 0 0 82vw !important;
    min-height: 250px !important;
    scroll-snap-align: center !important;
  }
  .booking-overlay h2 {
    line-height: .92 !important;
  }
  .booking-overlay h2 em {
    display: inline-block !important;
    margin-top: .18em !important;
  }
  .booking-overlay-side a[href^="mailto"] {
    display: block !important;
    margin-bottom: 8px !important;
  }
}

@media (min-width: 981px) {
  .mobile-contact-eyebrow,
  .booking-mobile-launch {
    display: none !important;
  }
}

/* Use brand hover instead of bright blue globally */
a:hover,
button:hover {
  transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}


/* V22 correction pack: reference-led polish, brand-coordinated CTAs, desktop/mobile behaviours */
:root {
  --jic-charcoal: #121817;
  --jic-charcoal-2: #1d2320;
  --jic-stone: #a7b494;
  --jic-stone-dark: #859474;
  --jic-taupe: #9b8e7c;
  --jic-muted-taupe: #c8bdac;
  --jic-soft-white: #f3efe6;
}
html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(circle at 10% 0%, rgba(200,189,172,.16), transparent 28%),
    linear-gradient(180deg, #f4efe5 0%, #f6f1e8 46%, #efe8dc 100%) !important;
}
main > section { border: 0 !important; }
.home-page .about-overlap { padding-bottom: clamp(54px, 5vw, 76px) !important; }
.home-page .services-summary { padding-top: clamp(44px, 5vw, 68px) !important; }
.services-summary, .why-section, .portfolio-section, .testimonials, .booking-section, .contact-form-section, .about-services-showcase, .services-work-strip {
  box-shadow: none !important;
  border-top: 0 !important;
}

/* Brand CTA system */
.btn,
.work-modal .btn,
.booking-panel .btn,
.service-panel .btn,
.nav-booking-cta,
.mobile-booking-cta,
.route-cta,
.form-panel button,
.overlay-booking-options a,
.booking-overlay-side a {
  transition: transform .25s cubic-bezier(.22,1,.36,1), background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease !important;
}
.btn-dark,
.btn-blue,
.btn-orange,
.btn-light,
.work-modal .btn,
.booking-panel .btn,
.service-panel .btn,
.form-panel button[type="submit"] {
  background: var(--jic-stone) !important;
  color: var(--jic-charcoal) !important;
  border: 1px solid rgba(18,24,23,.12) !important;
  box-shadow: none !important;
}
.btn:hover,
.btn:focus-visible,
.work-modal .btn:hover,
.form-panel button[type="submit"]:hover,
.overlay-booking-options a:hover {
  background: var(--jic-taupe) !important;
  color: var(--jic-soft-white) !important;
  border-color: var(--jic-taupe) !important;
  box-shadow: 0 18px 36px rgba(18,24,23,.18) !important;
}

/* Loader: logo present first, text spells/fades at same speed */
.preloader { background: var(--jic-charcoal) !important; }
.preloader-inner { gap: 13px !important; }
.preloader-logo { opacity: 1 !important; filter: drop-shadow(0 18px 40px rgba(0,0,0,.22)); }
.preloader-brand {
  font-family: "Instrument Serif", Georgia, serif !important;
  font-size: clamp(1.8rem, 3.65vw, 3.75rem) !important;
  line-height: .94 !important;
  letter-spacing: -.04em !important;
  color: var(--jic-soft-white) !important;
  max-width: min(900px, 92vw);
}
.preloader-tagline {
  font-family: "Instrument Serif", Georgia, serif !important;
  font-style: italic !important;
  text-transform: none !important;
  letter-spacing: -.02em !important;
  font-weight: 400 !important;
  font-size: clamp(1.15rem, 2.25vw, 2.35rem) !important;
  line-height: 1 !important;
  color: rgba(243,239,230,.82) !important;
  margin-top: 8px !important;
}
.loader-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px) skewX(-5deg);
  animation: jicSpell .5s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes jicSpell { to { opacity: 1; transform: translateY(0) skewX(0); } }
.preloader.stage-50 .preloader-brand { opacity: 1 !important; transform: none !important; }
.preloader.stage-90 .preloader-tagline { opacity: 1 !important; transform: translateY(0) !important; }

/* Header: hidden at load, compact centred Pieter-style navigation */
.site-header.reveal-header,
.site-header.reveal-header.is-black {
  inset: 16px 0 auto 0 !important;
  transform: translateY(-125%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.site-header.reveal-header.is-visible,
.site-header.reveal-header:focus-within {
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.site-header.reveal-header .header-inner {
  position: relative !important;
  width: min(1260px, calc(100% - 34px)) !important;
  min-height: 62px !important;
  padding: 6px !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 12px !important;
  border-radius: 999px !important;
  background: rgba(18,24,23,.90) !important;
  border: 1px solid rgba(243,239,230,.13) !important;
  box-shadow: 0 18px 44px rgba(18,24,23,.22) !important;
  backdrop-filter: blur(20px) saturate(1.05) !important;
}
.site-header.reveal-header .brand {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  padding: 0 12px 0 4px !important;
  color: var(--jic-soft-white) !important;
  font-size: clamp(1.18rem, 1.62vw, 1.7rem) !important;
  letter-spacing: -.035em !important;
  max-width: 360px !important;
}
.site-header.reveal-header .brand-logo { width: 42px !important; height: 42px !important; }
.site-header.reveal-header .nav-left {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  display: inline-flex !important;
  gap: 5px !important;
  padding: 5px !important;
  border-radius: 999px !important;
  background: rgba(243,239,230,.10) !important;
  border: 1px solid rgba(243,239,230,.12) !important;
}
.site-header.reveal-header .nav-right {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
}
.site-header.reveal-header .nav-left a {
  min-height: 44px !important;
  padding: 0 22px !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(243,239,230,.74) !important;
  border: 0 !important;
  font-weight: 850 !important;
}
.site-header.reveal-header .nav-left a.active,
.site-header.reveal-header .nav-left a:hover {
  background: var(--jic-soft-white) !important;
  color: var(--jic-charcoal) !important;
}
.site-header.reveal-header .nav-booking-cta {
  min-height: 50px !important;
  padding: 0 22px !important;
  border-radius: 16px !important;
  background: var(--jic-stone) !important;
  color: var(--jic-charcoal) !important;
  border: 0 !important;
  font-weight: 900 !important;
}
.site-header.reveal-header .nav-booking-cta:hover { background: var(--jic-taupe) !important; color: var(--jic-soft-white) !important; }
.site-header.reveal-header .menu-toggle {
  background: var(--jic-stone) !important;
  color: var(--jic-charcoal) !important;
  border-radius: 999px !important;
  border: 1px solid rgba(18,24,23,.1) !important;
}
.site-header.reveal-header .mobile-menu {
  background: rgba(18,24,23,.94) !important;
  border: 1px solid rgba(243,239,230,.14) !important;
  color: var(--jic-soft-white) !important;
  border-radius: 26px !important;
  margin-top: 10px !important;
  padding: 18px !important;
  box-shadow: 0 18px 54px rgba(18,24,23,.26) !important;
}

/* Desktop WhatsApp widget: small transparent video-led card like the reference */
@media (min-width: 981px) {
  .whatsapp-mini {
    left: auto !important;
    right: 22px !important;
    bottom: 22px !important;
    width: 184px !important;
    height: 76px !important;
    padding: 6px !important;
    display: grid !important;
    grid-template-columns: 76px 1fr !important;
    gap: 7px !important;
    border-radius: 14px !important;
    background: rgba(18,24,23,.30) !important;
    border: 1px solid rgba(243,239,230,.26) !important;
    backdrop-filter: blur(16px) saturate(1.08) !important;
    box-shadow: 0 16px 42px rgba(18,24,23,.22) !important;
    overflow: hidden !important;
  }
  .whatsapp-mini video {
    width: 76px !important;
    height: 64px !important;
    border-radius: 10px !important;
    object-fit: cover !important;
    opacity: .92 !important;
  }
  .wa-mini-body { padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; }
  .wa-mini-body strong { display: none !important; }
  .wa-mini-body a {
    width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    border-radius: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0 !important;
    background: rgba(18,24,23,.72) !important;
    border: 1px solid rgba(37,211,102,.5) !important;
    color: #25d366 !important;
  }
  .wa-mini-body a::after { content: "◖"; font-size: 1.6rem; line-height: 1; transform: rotate(45deg); }
  .wa-mini-close { top: -7px !important; right: -7px !important; width: 22px !important; height: 22px !important; font-size: 0 !important; background: rgba(243,239,230,.86) !important; }
  .wa-mini-close::after { content: "–"; font-size: 1rem; }
  .whatsapp-mini.is-minimised { width: 56px !important; height: 56px !important; border-radius: 999px !important; grid-template-columns: 1fr !important; }
}

/* Ready block: smaller, softer, correct service area */
.luxe-final-cta { padding: clamp(54px, 5vw, 72px) 0 clamp(50px, 4.5vw, 68px) !important; border-radius: 42px 42px 0 0 !important; }
.luxe-cta-left h2 { font-size: clamp(2.35rem, 4.8vw, 4.75rem) !important; line-height: .98 !important; }
.luxe-cta-left h2 em { margin-top: .1em !important; }
.luxe-cta-right div:has(span) p { line-height: 1.55 !important; }

/* Enquiries first block: screen/device composition */
.enquiries-page .contact-hero {
  min-height: 100svh !important;
  padding: 128px 0 70px !important;
  background-color: var(--jic-charcoal) !important;
  border-radius: 0 0 40px 40px !important;
}
.enquiries-page .contact-hero::after { background: linear-gradient(90deg, rgba(18,24,23,.95), rgba(18,24,23,.78) 58%, rgba(18,24,23,.92)) !important; }
.enquiries-page .contact-hero .hero-content {
  width: min(1280px, calc(100% - 44px)) !important;
  min-height: 720px !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(360px, 520px) 1fr !important;
  gap: clamp(36px, 6vw, 100px) !important;
  align-items: center !important;
  text-align: left !important;
}
.enquiries-page .contact-hero h1 {
  grid-column: 1 !important;
  font-family: "Instrument Serif", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(4.4rem, 7.3vw, 8.5rem) !important;
  line-height: .87 !important;
  letter-spacing: -.055em !important;
  max-width: 520px !important;
}
.enquiries-page .contact-hero .hero-content > p {
  grid-column: 1 !important;
  max-width: 490px !important;
  margin: -18px 0 0 !important;
  color: rgba(243,239,230,.75) !important;
}
.contact-device-grid {
  grid-column: 2 !important;
  grid-row: 1 / span 3 !important;
  height: 610px !important;
  margin: 0 !important;
  display: block !important;
  position: relative !important;
}
.contact-device {
  background: rgba(243,239,230,.92) !important;
  border: 1px solid rgba(243,239,230,.38) !important;
  box-shadow: 0 34px 110px rgba(0,0,0,.34) !important;
  backdrop-filter: blur(12px) !important;
}
.contact-device::before {
  content:"";
  position:absolute;
  inset: 14px;
  border:1px solid rgba(18,24,23,.09);
  border-radius: inherit;
  pointer-events:none;
}
.contact-device.route-1 { left: 4%; top: 9%; width: min(450px, 34vw); height: 310px; border-radius: 28px; transform: rotate(-2deg); }
.contact-device.route-2 { left: 38%; top: 0; width: 255px; height: 360px; border-radius: 34px; transform: rotate(1.5deg); }
.contact-device.route-3 { right: 1%; top: 30%; width: 380px; height: 260px; border-radius: 26px; transform: rotate(-1deg); }
.contact-device.route-4 { left: 17%; bottom: 0; width: 430px; height: 270px; border-radius: 30px; transform: rotate(1deg); }
.contact-device:hover { transform: translateY(-8px) rotate(0deg) !important; }
.mobile-contact-eyebrow { display: none !important; }
.scroll-note { grid-column: 1 !important; align-self: start !important; }

/* Question form: reveal one field at a time with progress visualisation */
.form-panel[data-step-progress] label[data-form-step] {
  overflow: hidden !important;
  max-height: 0 !important;
  opacity: 0 !important;
  transform: translateY(-10px) !important;
  margin: 0 !important;
  pointer-events: none !important;
  transition: max-height .48s cubic-bezier(.22,1,.36,1), opacity .34s ease, transform .34s ease, margin .34s ease !important;
}
.form-panel[data-step-progress] label[data-form-step].is-step-visible {
  max-height: 190px !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  margin-bottom: 14px !important;
  pointer-events: auto !important;
}
.form-panel[data-step-progress] label[data-form-step="4"].is-step-visible { max-height: 270px !important; }
.form-panel [data-progress-button] {
  --progress: 0%;
  position: relative !important;
  overflow: hidden !important;
  background: var(--jic-stone) !important;
  color: var(--jic-charcoal) !important;
  opacity: 1 !important;
}
.form-panel [data-progress-button]::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progress);
  background: var(--jic-muted-taupe) !important;
  z-index: -1;
  transition: width .35s ease;
}
.form-panel [data-progress-button]:disabled { cursor: not-allowed !important; filter: saturate(.86); }
.form-panel [data-progress-button]:not(:disabled) { background: var(--jic-charcoal) !important; color: var(--jic-soft-white) !important; }

/* About Why Choose Us: sticky card sequence inspired by the supplied reference */
.about-page .why-section.why-story-scroll {
  min-height: 300vh !important;
  padding: 0 !important;
  background: var(--jic-stone) !important;
  color: var(--jic-charcoal) !important;
  overflow: visible !important;
}
.about-page .why-section .work-track-shell {
  position: sticky !important;
  top: 0 !important;
  height: 100svh !important;
  display: grid !important;
  grid-template-columns: minmax(320px, 44%) 1fr !important;
  align-items: center !important;
  gap: clamp(26px, 5vw, 76px) !important;
  overflow: hidden !important;
  padding-block: clamp(74px, 8vw, 118px) !important;
}
.about-page .why-desktop-copy {
  text-align: left !important;
  margin: 0 !important;
  align-self: center !important;
}
.about-page .why-desktop-copy h2 {
  font-family: "Instrument Serif", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(4.2rem, 7.5vw, 8.8rem) !important;
  line-height: .82 !important;
  letter-spacing: -.055em !important;
}
.about-page .why-desktop-copy .section-intro {
  text-align: left !important;
  margin: 26px 0 0 !important;
  max-width: 520px !important;
  color: rgba(18,24,23,.72) !important;
}
.about-page .why-grid {
  display: flex !important;
  gap: 28px !important;
  align-items: stretch !important;
  min-width: max-content !important;
}
.about-page .why-item {
  flex: 0 0 min(430px, 34vw) !important;
  min-height: 500px !important;
  border-radius: 20px !important;
  background: rgba(243,239,230,.08) !important;
  border: 1.5px solid rgba(18,24,23,.34) !important;
  box-shadow: none !important;
  padding: 42px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  transform: rotate(-2deg) !important;
}
.about-page .why-item:nth-child(2) { transform: rotate(1.5deg) translateY(36px) !important; }
.about-page .why-item:nth-child(3) { transform: rotate(-1deg) translateY(72px) !important; }
.about-page .why-item svg { width: 90px !important; height: 90px !important; margin-bottom: auto !important; color: var(--jic-charcoal) !important; }
.about-page .why-item h3 { font-size: clamp(1.6rem, 2.25vw, 2.25rem) !important; line-height: 1 !important; }
.about-page .why-item p { color: rgba(18,24,23,.72) !important; }

/* Service mobile visual cue, no words */
.services-page .services-work-strip .section-header::after,
.services-page .services-work-strip .section-header::before { content: none !important; }
.mobile-card-orbit { display:none; }

@media (max-width: 980px) {
  .site-header.reveal-header .nav-left, .site-header.reveal-header .nav-right { display: none !important; }
  .site-header.reveal-header .header-inner { width: min(100% - 22px, 760px) !important; min-height: 58px !important; grid-template-columns: auto 1fr auto !important; background: rgba(18,24,23,.92) !important; }
  .site-header.reveal-header .brand { grid-column: 1 !important; font-size: 1.14rem !important; max-width: 245px !important; }
  .site-header.reveal-header .brand-logo { width: 38px !important; height: 38px !important; }
  .site-header.reveal-header .menu-toggle { display: inline-grid !important; place-items: center !important; background: var(--jic-taupe) !important; color: var(--jic-soft-white) !important; }

  /* Mobile loader: logo/name first, subtext fades in, no speed change */
  .preloader-brand { font-size: clamp(1.55rem, 8vw, 2.35rem) !important; }
  .preloader-tagline { font-size: clamp(1rem, 6vw, 1.55rem) !important; }

  /* Home mobile about: vertical story card stack, not a swipe carousel */
  .home-page .about-overlap { padding: 70px 0 44px !important; }
  .home-page .about-stage { min-height: auto !important; display: grid !important; gap: 18px !important; }
  .home-page .about-image,
  .home-page .about-card {
    position: sticky !important;
    left: auto !important;
    bottom: auto !important;
    top: 88px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 440px !important;
    margin: 0 !important;
    border-radius: 28px !important;
  }
  .home-page .about-image { height: 460px !important; z-index: 1 !important; }
  .home-page .about-card { z-index: 2 !important; padding: 42px 30px !important; transform: translateY(-32px) !important; }

  /* Mobile service panels: stacked scroll cards */
  .home-page .services-summary,
  .services-page .service-image-pin { padding: 70px 0 86px !important; }
  .services-pin-grid { display: block !important; }
  .services-pin-left { position: static !important; margin-bottom: 34px !important; }
  .services-pin-stack { display: block !important; }
  .services-pin-stack .service-panel {
    position: sticky !important;
    top: 88px !important;
    min-height: 420px !important;
    margin-bottom: 28px !important;
    border-radius: 30px !important;
    background: rgba(243,239,230,.96) !important;
    border: 1px solid rgba(18,24,23,.08) !important;
    box-shadow: 0 22px 54px rgba(18,24,23,.12) !important;
  }
  .services-pin-stack .service-panel:nth-child(2) { top: 102px !important; }
  .services-pin-stack .service-panel:nth-child(3) { top: 116px !important; }
  .services-pin-stack .service-panel:nth-child(4) { top: 130px !important; }

  /* Mobile See Our Work and about/services card strips: Fourmula-style step cards */
  .home-page .work-scroll-section,
  .about-page .about-services-showcase,
  .services-page .services-work-strip {
    min-height: auto !important;
    height: auto !important;
    padding: 70px 0 56px !important;
  }
  .work-sticky,
  .service-strip-sticky,
  .about-service-sticky {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
  }
  .work-track,
  .service-horizontal-track,
  .about-service-cards {
    display: block !important;
    transform: none !important;
    padding: 0 !important;
  }
  .work-slide,
  .service-work-slide,
  .about-service-cards .image-card {
    position: sticky !important;
    top: 88px !important;
    width: 100% !important;
    height: 520px !important;
    min-height: 520px !important;
    margin: 0 0 28px !important;
    border-radius: 30px !important;
    box-shadow: 0 22px 60px rgba(0,0,0,.22) !important;
  }
  .work-slide:nth-child(2), .service-work-slide:nth-child(2) { top: 102px !important; }
  .work-slide:nth-child(3), .service-work-slide:nth-child(3) { top: 116px !important; }
  .work-slide:nth-child(4), .service-work-slide:nth-child(4) { top: 130px !important; }
  .work-slide:nth-child(5), .service-work-slide:nth-child(5) { top: 144px !important; }
  .work-slide:nth-child(6), .service-work-slide:nth-child(6) { top: 158px !important; }

  /* Testimonials: opaque stacked story cards */
  .testimonial-grid { display: block !important; overflow: visible !important; }
  .testimonial {
    position: sticky !important;
    top: 90px !important;
    min-height: 260px !important;
    margin-bottom: 22px !important;
    background: rgba(243,239,230,.98) !important;
    border-radius: 28px !important;
    box-shadow: 0 20px 48px rgba(18,24,23,.12) !important;
  }
  .testimonial:nth-child(2) { top: 104px !important; }
  .testimonial:nth-child(3) { top: 118px !important; }
  .testimonial:nth-child(4) { top: 132px !important; }
  .testimonial:nth-child(5) { top: 146px !important; }

  /* Services mobile: integrated visual scroll affordance */
  .services-page .services-work-strip + .services-work-strip { padding-top: 26px !important; }
  .services-page .service-strip-head .section-header { position: relative !important; }
  .services-page .service-strip-head .section-header::after {
    content: "" !important;
    display: block !important;
    width: 92px !important;
    height: 36px !important;
    margin: 18px auto 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, rgba(243,239,230,.10), rgba(243,239,230,.28), rgba(243,239,230,.10)) !important;
    border: 1px solid rgba(243,239,230,.18) !important;
  }
  .services-page .service-strip-head .section-header::before {
    content: "→" !important;
    display: grid !important;
    place-items: center !important;
    width: 46px !important;
    height: 46px !important;
    margin: 0 auto -58px !important;
    transform: translateY(48px) !important;
    border-radius: 999px !important;
    background: rgba(243,239,230,.16) !important;
    color: var(--jic-soft-white) !important;
    border: 1px solid rgba(243,239,230,.22) !important;
    backdrop-filter: blur(12px) !important;
    font-weight: 900 !important;
    z-index: 5 !important;
    position: relative !important;
  }

  /* About mobile why: ensure header/subheader/cards present, Fourmula-style stacking */
  .about-page .why-section.why-story-scroll { min-height: auto !important; padding: 74px 0 76px !important; }
  .about-page .why-section .work-track-shell { position: static !important; height: auto !important; display: block !important; padding-block: 0 !important; }
  .about-page .why-desktop-copy { text-align: center !important; margin-bottom: 34px !important; }
  .about-page .why-desktop-copy h2 { font-size: clamp(3.5rem, 16vw, 5.4rem) !important; }
  .about-page .why-desktop-copy .section-intro { text-align: center !important; margin: 18px auto 0 !important; }
  .about-page .why-grid { display: block !important; min-width: 0 !important; }
  .about-page .why-item {
    position: sticky !important;
    top: 90px !important;
    width: 100% !important;
    min-height: 430px !important;
    margin-bottom: 28px !important;
    transform: none !important;
    background: rgba(243,239,230,.16) !important;
    border-radius: 30px !important;
  }
  .about-page .why-item:nth-child(2) { top: 106px !important; transform: none !important; }
  .about-page .why-item:nth-child(3) { top: 122px !important; transform: none !important; }

  /* Enquiries mobile: hero then stacked route cards; book appointment last */
  .enquiries-page .contact-hero {
    min-height: auto !important;
    padding: 116px 0 66px !important;
    border-radius: 0 0 34px 34px !important;
  }
  .enquiries-page .contact-hero .hero-content {
    display: block !important;
    min-height: auto !important;
    text-align: left !important;
    width: min(100% - 32px, 560px) !important;
  }
  .mobile-contact-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    padding: 10px 13px !important;
    margin: 0 0 22px !important;
    border-radius: 999px !important;
    background: rgba(243,239,230,.16) !important;
    color: var(--jic-soft-white) !important;
    border: 1px solid rgba(243,239,230,.18) !important;
    text-transform: uppercase !important;
    letter-spacing: .12em !important;
    font-size: .68rem !important;
    font-weight: 900 !important;
  }
  .enquiries-page .contact-hero h1 { text-align: center !important; font-size: clamp(4rem, 18vw, 6.2rem) !important; margin: 0 auto !important; }
  .enquiries-page .contact-hero .hero-content > p { text-align: left !important; margin: 28px 0 0 !important; }
  .contact-device-grid { display: flex !important; flex-direction: column !important; height: auto !important; margin-top: 72px !important; gap: 0 !important; }
  .contact-device {
    position: sticky !important;
    left: auto !important; right: auto !important; top: 92px !important;
    width: 100% !important; height: auto !important; min-height: 275px !important;
    margin-bottom: 24px !important;
    transform: none !important;
    border-radius: 30px !important;
    order: 1 !important;
  }
  .contact-device.route-2 { order: 1 !important; top: 96px !important; }
  .contact-device.route-3 { order: 2 !important; top: 110px !important; }
  .contact-device.route-4 { order: 3 !important; top: 124px !important; }
  .contact-device.route-1 { order: 4 !important; top: 138px !important; }
  .contact-device .route-cta,
  .booking-mobile-launch {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 52px !important;
    padding: 0 20px !important;
    border-radius: 999px !important;
    background: var(--jic-stone) !important;
    color: var(--jic-charcoal) !important;
    font-weight: 900 !important;
    margin-top: 20px !important;
  }
  .booking-section .booking-stack { display: none !important; }
  .booking-mobile-launch { width: 100% !important; border: 0 !important; }
  .overlay-booking-options { display: flex !important; overflow-x: auto !important; gap: 14px !important; scroll-snap-type: x mandatory !important; padding-bottom: 12px !important; }
  .overlay-booking-options a { flex: 0 0 82vw !important; min-height: 320px !important; scroll-snap-align: center !important; border-radius: 28px !important; }
  .booking-overlay-inner h2 { line-height: .94 !important; }
  .booking-overlay-inner h2 em { display: inline-block !important; margin-top: .12em !important; }
  .booking-overlay-side a { display: block !important; margin-top: 6px !important; }
  .booking-overlay-side a + a { margin-top: 10px !important; }

  .luxe-cta-left h2 { font-size: clamp(3rem, 14vw, 4.7rem) !important; line-height: .98 !important; }
  .luxe-cta-left h2 em { margin-top: .15em !important; }
}


/* V23 corrective premium responsive pass */
:root {
  --jic-deep-charcoal: #121817;
  --jic-muted-stone: #9cab88;
  --jic-muted-taupe-2: #b9ab98;
  --jic-off-white: #efe9dc;
}

/* Keep WhatsApp left and chatbot right. Desktop WhatsApp mirrors the compact transparent reference treatment. */
.chatbot-button { right: 24px !important; left: auto !important; background: var(--jic-deep-charcoal) !important; color: var(--jic-off-white) !important; box-shadow: 0 20px 48px rgba(18,24,23,.26) !important; }
.chatbot-panel { right: 24px !important; left: auto !important; }
@media (min-width: 981px) {
  .whatsapp-mini {
    left: 22px !important;
    right: auto !important;
    bottom: 22px !important;
    width: 184px !important;
    height: 86px !important;
    border-radius: 18px !important;
    background: rgba(18,24,23,.18) !important;
    border: 1px solid rgba(239,233,220,.24) !important;
    box-shadow: 0 22px 60px rgba(0,0,0,.22) !important;
    backdrop-filter: blur(12px) !important;
    overflow: hidden !important;
  }
  .whatsapp-mini video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: .62 !important;
    filter: saturate(.82) contrast(1.05) !important;
  }
  .whatsapp-mini::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(18,24,23,.75), rgba(18,24,23,.24));
    pointer-events: none;
  }
  .wa-mini-body {
    position: relative !important;
    z-index: 2 !important;
    padding: 13px 48px 12px 14px !important;
  }
  .wa-mini-body strong { font-size: .78rem !important; color: var(--jic-off-white) !important; }
  .wa-mini-body a { min-height: 30px !important; margin-top: 7px !important; padding: 0 11px !important; font-size: .76rem !important; background: rgba(37,211,102,.94) !important; }
  .wa-mini-close { z-index: 3 !important; top: 9px !important; right: 9px !important; width: 28px !important; height: 28px !important; background: rgba(239,233,220,.84) !important; }
  .wa-mini-open { z-index: 3 !important; }
  .whatsapp-mini.is-minimised { width: 58px !important; height: 58px !important; border-radius: 999px !important; }
  .whatsapp-mini.is-minimised::after { display: none !important; }
}
@media (max-width: 980px) {
  .whatsapp-mini { left: 14px !important; right: auto !important; }
  .chatbot-button { right: 14px !important; }
  .chatbot-panel { right: 12px !important; left: auto !important; }
}

/* Home: reduce the gap between About and Our Painting Services. */
.home-page .about-overlap { padding-bottom: clamp(32px, 4vw, 58px) !important; }
.home-page .services-summary { padding-top: clamp(58px, 6vw, 88px) !important; }

/* About: restore the v21 cream treatment and replace horizontal motion with a Pieter-style sticky card stack. */
.about-page .why-section.why-story-scroll,
.about-page .why-section.why-card-stack {
  background: var(--jic-cream) !important;
  color: var(--jic-ink) !important;
  min-height: 270vh !important;
  padding: 0 !important;
  overflow: clip !important;
}
.about-page .why-card-stack > .container,
.about-page .why-section.why-story-scroll > .container {
  position: sticky !important;
  top: 0 !important;
  height: 100svh !important;
  display: grid !important;
  grid-template-columns: minmax(310px, .86fr) minmax(440px, 1.14fr) !important;
  align-items: center !important;
  gap: clamp(34px, 5vw, 92px) !important;
  overflow: hidden !important;
  padding-block: clamp(76px, 9vh, 112px) clamp(44px, 6vh, 76px) !important;
}
.about-page .why-desktop-copy {
  align-self: center !important;
  text-align: left !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 4 !important;
}
.about-page .why-desktop-copy h2,
.about-page .why-card-stack .section-title {
  font-family: "Instrument Serif", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(3.35rem, 6.4vw, 7.4rem) !important;
  line-height: .92 !important;
  letter-spacing: -.055em !important;
  margin: 0 !important;
  color: var(--jic-ink) !important;
}
.about-page .why-desktop-copy .section-intro {
  text-align: left !important;
  max-width: 560px !important;
  margin: 24px 0 0 !important;
  color: rgba(18,24,23,.68) !important;
}
.about-page .why-stack-track,
.about-page .why-card-stack .why-grid {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: min(690px, 74svh) !important;
  min-width: 0 !important;
  margin: 0 !important;
  transform: none !important;
  will-change: auto !important;
}
.about-page .why-card-stack .why-item {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: min(470px, 42vw) !important;
  min-height: 360px !important;
  border-radius: 18px !important;
  padding: 34px 32px !important;
  background: rgba(255,255,255,.56) !important;
  border: 1px solid rgba(18,24,23,.13) !important;
  color: var(--jic-ink) !important;
  box-shadow: 0 30px 80px rgba(18,24,23,.12) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  transition: transform .12s linear, opacity .12s linear !important;
}
.about-page .why-card-stack .why-item svg { width: 84px !important; height: 84px !important; margin: 0 0 auto !important; color: var(--jic-ink) !important; }
.about-page .why-card-stack .why-item h3 { margin-top: auto !important; font-size: clamp(1.45rem, 2vw, 2.1rem) !important; line-height: 1.04 !important; }
.about-page .why-card-stack .why-item p { color: rgba(18,24,23,.7) !important; }

/* Enquiries hero: sticky first block with reference-style contact route screens. */
.enquiries-page .contact-hero.contact-scroll-hero {
  min-height: 285vh !important;
  display: block !important;
  background: var(--jic-ink) !important;
  color: var(--jic-cream) !important;
  overflow: clip !important;
  border-radius: 0 !important;
}
.enquiries-page .contact-scroll-hero::before {
  background: radial-gradient(circle at 78% 22%, rgba(156,171,136,.18), transparent 34%), linear-gradient(180deg, rgba(18,24,23,.88), rgba(18,24,23,.96)) !important;
}
.enquiries-page .contact-scroll-hero .hero-content {
  position: sticky !important;
  top: 0 !important;
  height: 100svh !important;
  width: min(1240px, calc(100% - 56px)) !important;
  display: grid !important;
  grid-template-columns: minmax(360px, .84fr) minmax(540px, 1.16fr) !important;
  align-items: center !important;
  gap: clamp(36px, 5vw, 90px) !important;
  text-align: left !important;
  padding: clamp(84px, 8vh, 108px) 0 clamp(40px, 5vh, 64px) !important;
  margin: 0 auto !important;
}
.enquiries-page .contact-scroll-hero h1 {
  grid-column: 1 !important;
  align-self: end !important;
  font-family: "Instrument Serif", Georgia, serif !important;
  font-size: clamp(4rem, 8vw, 9rem) !important;
  line-height: .88 !important;
  letter-spacing: -.055em !important;
  margin: 0 !important;
}
.enquiries-page .contact-scroll-hero .hero-content > p {
  grid-column: 1 !important;
  align-self: start !important;
  max-width: 520px !important;
  margin: 24px 0 0 !important;
  color: rgba(239,233,220,.72) !important;
}
.enquiries-page .contact-scroll-deck {
  grid-column: 2 !important;
  grid-row: 1 / span 3 !important;
  position: relative !important;
  height: min(710px, 74svh) !important;
  margin: 0 !important;
  display: block !important;
}
.enquiries-page .contact-scroll-card {
  position: absolute !important;
  width: min(470px, 38vw) !important;
  min-height: 300px !important;
  padding: 28px !important;
  border-radius: 24px !important;
  background: rgba(239,233,220,.92) !important;
  color: var(--jic-ink) !important;
  box-shadow: 0 38px 110px rgba(0,0,0,.34) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  overflow: hidden !important;
  transition: transform .12s linear, opacity .12s linear !important;
}
.enquiries-page .contact-scroll-card::before {
  content:"" !important;
  position:absolute !important;
  inset: 14px !important;
  border-radius: inherit !important;
  border: 1px solid rgba(18,24,23,.11) !important;
  pointer-events: none !important;
}
.enquiries-page .contact-scroll-card > span:first-child {
  position: absolute !important;
  top: 20px !important;
  left: 24px !important;
  font-family: "Instrument Serif", Georgia, serif !important;
  font-size: 3rem !important;
  letter-spacing: -.04em !important;
  color: rgba(18,24,23,.46) !important;
}
.enquiries-page .contact-scroll-card strong { font-size: clamp(1.45rem, 2.2vw, 2.5rem) !important; line-height: .98 !important; letter-spacing: -.05em !important; }
.enquiries-page .contact-scroll-card em { max-width: 340px !important; }
.enquiries-page .contact-scroll-card .route-cta { margin-top: 18px !important; background: var(--jic-ink) !important; color: var(--jic-cream) !important; border-radius: 999px !important; min-height: 48px !important; padding: 0 18px !important; }
.enquiries-page .scroll-note { grid-column: 1 !important; color: rgba(239,233,220,.62) !important; }

/* All important CTA buttons on core pages follow the Book Appointment palette. */
.home-page .btn, .about-page .btn, .services-page .btn,
.work-modal .btn {
  background: var(--jic-muted-stone) !important;
  color: var(--jic-ink) !important;
  border-color: var(--jic-muted-stone) !important;
}
.home-page .btn:hover, .about-page .btn:hover, .services-page .btn:hover,
.work-modal .btn:hover {
  background: var(--jic-muted-taupe-2) !important;
  border-color: var(--jic-muted-taupe-2) !important;
  color: var(--jic-ink) !important;
}
.home-page .btn.btn-dark, .about-page .btn.btn-dark, .services-page .btn.btn-dark,
.work-modal .btn.btn-dark {
  background: var(--jic-muted-stone) !important;
  color: var(--jic-ink) !important;
}

@media (max-width: 980px) {
  /* Mobile: keep top menu button brand-coordinated. */
  .site-header.reveal-header .menu-toggle { background: var(--jic-muted-stone) !important; color: var(--jic-ink) !important; border: 1px solid rgba(239,233,220,.22) !important; }

  /* Mobile about cards: responsive stacked story cards, not swipe. */
  .home-page .about-overlap { min-height: 142vh !important; padding: 58px 0 28px !important; }
  .home-page .about-stage { display: block !important; min-height: 118vh !important; }
  .home-page .about-image,
  .home-page .about-card {
    position: sticky !important;
    width: 100% !important;
    left: auto !important;
    right: auto !important;
    border-radius: 28px !important;
    margin: 0 !important;
    box-shadow: 0 24px 60px rgba(0,0,0,.14) !important;
  }
  .home-page .about-image { top: 92px !important; height: 52vh !important; z-index: 1 !important; }
  .home-page .about-card { top: 108px !important; min-height: 52vh !important; z-index: 2 !important; padding: 34px 26px !important; transform: translateY(42vh) !important; }

  /* Mobile painting services: stack-up cards with deliberate depth. */
  .home-page .services-summary,
  .services-page .service-image-pin { padding: 62px 0 70px !important; }
  .services-pin-grid { display:block !important; }
  .services-pin-left { position: static !important; margin-bottom: 30px !important; }
  .services-pin-stack { display: block !important; width: 100% !important; }
  .services-pin-stack .service-panel {
    position: sticky !important;
    top: 90px !important;
    width: 100% !important;
    min-height: 390px !important;
    margin: 0 0 24px !important;
    border-radius: 30px !important;
    transform-origin: center top !important;
    background: rgba(239,233,220,.98) !important;
    z-index: 1 !important;
  }
  .services-pin-stack .service-panel:nth-child(2) { top: 104px !important; z-index: 2 !important; }
  .services-pin-stack .service-panel:nth-child(3) { top: 118px !important; z-index: 3 !important; }
  .services-pin-stack .service-panel:nth-child(4) { top: 132px !important; z-index: 4 !important; }

  /* Mobile work cards: Fourmula-style vertical stack, full width, no side overflow/empty gaps. */
  .home-page .work-scroll-section,
  .about-page .about-services-showcase,
  .services-page .services-work-strip {
    min-height: auto !important;
    height: auto !important;
    padding: 58px 0 44px !important;
    overflow: visible !important;
  }
  .work-sticky, .service-strip-sticky, .about-service-sticky {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
    display: block !important;
  }
  .work-track-shell, .service-track-shell { overflow: visible !important; width: min(var(--container), calc(100% - 32px)) !important; }
  .work-track, .service-horizontal-track, .about-service-cards, .service-work-cards {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    transform: none !important;
  }
  .work-slide, .service-work-slide, .about-service-cards .image-card {
    position: sticky !important;
    top: 92px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: min(68vh, 560px) !important;
    min-height: 480px !important;
    margin: 0 0 22px !important;
    border-radius: 30px !important;
    overflow: hidden !important;
  }
  .work-slide:nth-child(2), .service-work-slide:nth-child(2), .about-service-cards .image-card:nth-child(2) { top: 106px !important; z-index: 2 !important; }
  .work-slide:nth-child(3), .service-work-slide:nth-child(3), .about-service-cards .image-card:nth-child(3) { top: 120px !important; z-index: 3 !important; }
  .work-slide:nth-child(4), .service-work-slide:nth-child(4), .about-service-cards .image-card:nth-child(4) { top: 134px !important; z-index: 4 !important; }
  .work-slide:nth-child(5), .service-work-slide:nth-child(5), .about-service-cards .image-card:nth-child(5) { top: 148px !important; z-index: 5 !important; }
  .work-slide:nth-child(6), .service-work-slide:nth-child(6), .about-service-cards .image-card:nth-child(6) { top: 162px !important; z-index: 6 !important; }
  .home-page .work-scroll-section { padding-bottom: 22px !important; }

  /* Testimonials: opaque stacked story cards with no bleed-through. */
  .testimonial-grid { display:block !important; width:100% !important; overflow:visible !important; }
  .testimonial { position: sticky !important; top: 92px !important; background: rgba(239,233,220,1) !important; color: var(--jic-ink) !important; box-shadow: 0 24px 64px rgba(18,24,23,.16) !important; border: 1px solid rgba(18,24,23,.08) !important; }
  .testimonial:nth-child(2) { top: 106px !important; z-index:2 !important; }
  .testimonial:nth-child(3) { top: 120px !important; z-index:3 !important; }
  .testimonial:nth-child(4) { top: 134px !important; z-index:4 !important; }
  .testimonial:nth-child(5) { top: 148px !important; z-index:5 !important; }

  /* About page Why section: ensure header/subheader and cards are present and responsive. */
  .about-page .why-section.why-card-stack { min-height: auto !important; padding: 64px 0 58px !important; overflow: visible !important; background: var(--jic-cream) !important; }
  .about-page .why-card-stack > .container { position: static !important; height: auto !important; display: block !important; overflow: visible !important; padding-block: 0 !important; }
  .about-page .why-desktop-copy { text-align: center !important; margin: 0 0 28px !important; }
  .about-page .why-desktop-copy h2 { font-size: clamp(3.4rem, 16vw, 5.4rem) !important; line-height: .94 !important; }
  .about-page .why-desktop-copy .section-intro { text-align: center !important; margin: 18px auto 0 !important; max-width: 520px !important; }
  .about-page .why-stack-track { display:block !important; height:auto !important; min-width:0 !important; width:100% !important; }
  .about-page .why-card-stack .why-item {
    position: sticky !important;
    left: auto !important;
    top: 92px !important;
    width: 100% !important;
    min-height: 410px !important;
    margin: 0 0 22px !important;
    transform: none !important;
    opacity: 1 !important;
    border-radius: 30px !important;
    background: rgba(255,255,255,.62) !important;
    z-index: 1 !important;
  }
  .about-page .why-card-stack .why-item:nth-child(2) { top: 108px !important; z-index: 2 !important; }
  .about-page .why-card-stack .why-item:nth-child(3) { top: 124px !important; z-index: 3 !important; }

  /* Services page: remove empty spaces, reduce commercial heading gap, integrate scroll cue inside cards. */
  .services-page .services-work-strip + .services-work-strip { padding-top: 16px !important; margin-top: 0 !important; }
  .services-page .services-work-strip .work-scroll-head { padding-top: 26px !important; }
  .services-page .service-strip-head .section-header::before,
  .services-page .service-strip-head .section-header::after { content: none !important; }
  .services-page .service-work-slide::after {
    content: "" !important;
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    width: 46px !important;
    height: 46px !important;
    transform: translateY(-50%) !important;
    border-radius: 999px !important;
    background: rgba(239,233,220,.16) !important;
    border: 1px solid rgba(239,233,220,.28) !important;
    backdrop-filter: blur(12px) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 18px 44px rgba(0,0,0,.18) !important;
  }
  .services-page .service-work-slide::before { z-index: 1 !important; }
  .services-page .service-work-slide .image-card-content::after {
    content: "›" !important;
    position: absolute !important;
    right: 26px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: rgba(239,233,220,.9) !important;
    font-size: 1.7rem !important;
    z-index: 4 !important;
  }

  /* Enquiries mobile: first block is hero text, then route cards stack over one another; Book appointment last. */
  .enquiries-page .contact-scroll-hero { min-height: auto !important; padding: 112px 0 54px !important; overflow: visible !important; }
  .enquiries-page .contact-scroll-hero .hero-content { position: static !important; height: auto !important; display: block !important; width: min(100% - 32px, 560px) !important; padding: 0 !important; }
  .mobile-contact-eyebrow { display: inline-flex !important; background: rgba(239,233,220,.16) !important; color: var(--jic-cream) !important; border: 1px solid rgba(239,233,220,.22) !important; }
  .enquiries-page .contact-scroll-hero h1 { text-align: center !important; font-size: clamp(3.8rem, 18vw, 6rem) !important; }
  .enquiries-page .contact-scroll-hero .hero-content > p { text-align: left !important; margin: 28px 0 0 !important; color: rgba(239,233,220,.76) !important; }
  .enquiries-page .contact-scroll-deck { display: flex !important; flex-direction: column !important; height: auto !important; margin-top: 64px !important; gap: 0 !important; }
  .enquiries-page .contact-scroll-card {
    position: sticky !important;
    left: auto !important; top: 92px !important;
    width: 100% !important; min-height: 285px !important;
    margin-bottom: 22px !important;
    transform: none !important;
    opacity: 1 !important;
    z-index: 1 !important;
  }
  .enquiries-page .contact-scroll-card.route-2 { order:1 !important; top: 92px !important; z-index: 1 !important; }
  .enquiries-page .contact-scroll-card.route-3 { order:2 !important; top: 106px !important; z-index: 2 !important; }
  .enquiries-page .contact-scroll-card.route-4 { order:3 !important; top: 120px !important; z-index: 3 !important; }
  .enquiries-page .contact-scroll-card.route-1 { order:4 !important; top: 134px !important; z-index: 4 !important; }
  .contact-device .route-cta, .booking-mobile-launch { border-radius: 999px !important; min-height: 54px !important; padding: 0 22px !important; }
  .booking-mobile-launch { background: var(--jic-muted-stone) !important; color: var(--jic-ink) !important; }
  .booking-section .booking-stack { display: none !important; }

  /* Appointment pop-up cards: vertical stack cards instead of tiny carousel. */
  .booking-overlay { overflow-y: auto !important; }
  .overlay-booking-options { display:block !important; overflow: visible !important; padding: 0 !important; }
  .overlay-booking-options a {
    position: sticky !important;
    top: 96px !important;
    width: 100% !important;
    min-height: 300px !important;
    margin-bottom: 18px !important;
    border-radius: 28px !important;
  }
  .overlay-booking-options a:nth-child(2) { top: 110px !important; z-index: 2 !important; }
  .overlay-booking-options a:nth-child(3) { top: 124px !important; z-index: 3 !important; }
  .overlay-booking-options a:nth-child(4) { top: 138px !important; z-index: 4 !important; }
}

/* V24 targeted refinements: loader fade, WhatsApp split prompt, shorter chatbot, about/enquiries motion, and mobile responsiveness corrections. */

/* Loader: start with logo only, then brand and tagline fade in at current timing. */
.preloader-brand,
.preloader-tagline {
  opacity: 0 !important;
  transform: translateY(12px) !important;
  transition: opacity .36s ease, transform .36s ease !important;
}
.preloader .preloader-brand .loader-letter,
.preloader .preloader-tagline .loader-letter { animation: none !important; opacity: 1 !important; transform: none !important; }
.preloader.stage-50 .preloader-brand,
.preloader.stage-90 .preloader-tagline {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Chatbot: slightly shorter so the top does not clip under the header while scrolling. */
.chatbot-panel {
  bottom: 88px !important;
  max-height: min(560px, calc(100vh - 128px)) !important;
}
.chatbot-body {
  max-height: calc(min(560px, calc(100vh - 128px)) - 96px) !important;
}
@media (max-width: 980px) {
  .chatbot-panel {
    max-height: min(68vh, 520px) !important;
  }
  .chatbot-body {
    max-height: calc(min(68vh, 520px) - 96px) !important;
  }
}

/* Desktop WhatsApp: keep size, split into video + icon panes with transparent treatment. */
@media (min-width: 981px) {
  .whatsapp-mini {
    display: grid !important;
    grid-template-columns: 1fr 94px !important;
    align-items: stretch !important;
    padding: 6px !important;
    gap: 6px !important;
    background: rgba(18,24,23,.12) !important;
    border: 1px solid rgba(239,233,220,.28) !important;
    backdrop-filter: blur(12px) !important;
  }
  .whatsapp-mini::after { display: none !important; }
  .whatsapp-mini video {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 72px !important;
    border-radius: 12px !important;
    opacity: .92 !important;
    filter: saturate(.88) contrast(1.02) !important;
  }
  .whatsapp-mini .wa-video-pane,
  .whatsapp-mini .wa-icon-pane {
    position: relative !important;
    z-index: 1 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    min-height: 72px !important;
  }
  .whatsapp-mini .wa-video-pane {
    background: rgba(156,171,136,.14) !important;
    border: 1px solid rgba(239,233,220,.18) !important;
  }
  .whatsapp-mini .wa-icon-pane {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(18,24,23,.18) !important;
    border: 1px solid rgba(239,233,220,.18) !important;
    color: #22c55e !important;
    cursor: pointer !important;
    transition: background .2s ease, transform .2s ease !important;
  }
  .whatsapp-mini .wa-icon-pane:hover { background: rgba(18,24,23,.26) !important; transform: translateY(-1px) !important; }
  .whatsapp-mini .wa-icon-pane svg { width: 36px !important; height: 36px !important; }
  .wa-mini-body,
  .wa-mini-open { display: none !important; }
  .wa-mini-close {
    z-index: 4 !important;
    top: -10px !important;
    right: -10px !important;
    width: 24px !important;
    height: 24px !important;
    background: rgba(18,24,23,.48) !important;
    color: var(--jic-cream) !important;
    border: 1px solid rgba(239,233,220,.24) !important;
  }
  .whatsapp-mini.is-minimised {
    display: flex !important;
    padding: 0 !important;
  }
}

.whatsapp-qr-panel {
  position: fixed;
  left: 22px;
  bottom: 118px;
  width: min(392px, calc(100vw - 32px));
  background: #efebe4;
  color: var(--jic-ink);
  border-radius: 0;
  box-shadow: 0 30px 80px rgba(0,0,0,.22);
  padding: 26px 26px 18px;
  z-index: 1100;
  display: none;
}
.whatsapp-qr-panel.open { display: block; }
.whatsapp-qr-close {
  position: absolute;
  right: 14px;
  top: 10px;
  background: transparent;
  border: 0;
  font-size: 2rem;
  line-height: 1;
  color: var(--jic-ink);
  cursor: pointer;
}
.whatsapp-qr-panel img {
  width: 150px;
  height: 150px;
  display: block;
  margin: 2px auto 18px;
  object-fit: contain;
}
.whatsapp-qr-panel h3 {
  font-size: clamp(1.8rem, 3.2vw, 2.2rem);
  line-height: .98;
  text-align: center;
  margin: 0 0 12px;
}
.whatsapp-qr-panel p {
  margin: 0 auto 18px;
  max-width: 300px;
  text-align: center;
  color: rgba(18,24,23,.64);
}
.whatsapp-qr-action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 56px;
  padding: 0 16px 0 20px;
  background: var(--jic-muted-stone);
  color: var(--jic-ink);
  border-radius: 4px;
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
}
.whatsapp-qr-action span:last-child {
  width: 48px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--jic-ink);
  color: var(--jic-cream);
  border-radius: 4px;
  font-size: 1.6rem;
}
@media (max-width: 980px) {
  .whatsapp-qr-panel { display: none !important; }
}

/* About desktop: wider copy and stronger scrolling motion for Why Choose Us. */
.about-page .why-card-stack > .container,
.about-page .why-section.why-story-scroll > .container {
  grid-template-columns: minmax(360px, 1fr) minmax(500px, 1fr) !important;
  gap: clamp(36px, 5vw, 98px) !important;
  padding-top: clamp(92px, 10vh, 132px) !important;
}
.about-page .why-desktop-copy { max-width: 680px !important; }
.about-page .why-desktop-copy .section-intro { max-width: 640px !important; }
.about-page .why-card-stack .why-item {
  width: min(500px, 42vw) !important;
  min-height: 370px !important;
}

/* Enquiries desktop: lighter heading tone and slightly more elegant first-block spacing. */
.enquiries-page .contact-scroll-hero h1 {
  color: var(--jic-soft-off-white) !important;
}
.enquiries-page .contact-scroll-hero .hero-content > p {
  max-width: 560px !important;
}
.enquiries-page .scroll-note {
  margin-top: 18px !important;
}

@media (max-width: 980px) {
  /* Home mobile about block: text overlays the image with slight transparency. */
  .home-page .about-overlap {
    min-height: 126vh !important;
    padding: 54px 0 20px !important;
  }
  .home-page .about-stage {
    display: block !important;
    min-height: 108vh !important;
    position: relative !important;
  }
  .home-page .about-image {
    top: 92px !important;
    height: 52vh !important;
    border-radius: 28px !important;
    overflow: hidden !important;
  }
  .home-page .about-card {
    top: 112px !important;
    min-height: auto !important;
    transform: translateY(24vh) !important;
    background: rgba(239,233,220,.84) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255,255,255,.36) !important;
  }

  /* About mobile first block: remove the image and make the intro feel more editorial and spacious. */
  .about-page .about-cinematic {
    padding: 112px 0 42px !important;
  }
  .about-page .about-cinematic .about-image {
    display: none !important;
  }
  .about-page .about-cinematic .about-stage {
    display: block !important;
    min-height: auto !important;
  }
  .about-page .about-cinematic .about-card {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 34px 24px 42px !important;
    border-radius: 30px !important;
    background: linear-gradient(180deg, rgba(239,233,220,.98), rgba(225,219,208,.92)) !important;
    box-shadow: 0 24px 70px rgba(18,24,23,.12) !important;
  }
  .about-page .about-cinematic .about-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 16px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(18,24,23,.08) !important;
    pointer-events: none !important;
  }
  .about-page .about-cinematic .about-card p { margin-bottom: 12px !important; }

  /* About mobile: Why Choose Us should be present, readable, and stack like a premium card story. */
  .about-page .why-section.why-card-stack {
    background: var(--jic-cream) !important;
    padding: 56px 0 36px !important;
  }
  .about-page .why-desktop-copy {
    text-align: left !important;
    margin: 0 0 22px !important;
  }
  .about-page .why-desktop-copy .section-intro {
    text-align: left !important;
    max-width: none !important;
  }
  .about-page .why-card-stack .why-item {
    background: rgba(239,233,220,.96) !important;
    min-height: 360px !important;
  }

  /* About mobile: Painting Services remains horizontal, with a creative visual cue to scroll. */
  .about-page .about-services-showcase,
  .about-page .about-services-showcase .work-sticky,
  .about-page .about-services-showcase .work-track-shell {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .about-page .about-services-showcase .about-service-cards {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(82vw, 320px) !important;
    gap: 16px !important;
    overflow-x: auto !important;
    padding: 10px 14px 24px 0 !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .about-page .about-services-showcase .about-service-cards::-webkit-scrollbar { display: none !important; }
  .about-page .about-services-showcase .about-service-cards .image-card {
    position: relative !important;
    top: auto !important;
    height: 420px !important;
    min-height: 420px !important;
    margin: 0 !important;
    scroll-snap-align: start !important;
  }
  .about-page .about-services-showcase .work-scroll-head .section-header::after {
    content: "↔" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    margin-top: 14px !important;
    border-radius: 999px !important;
    background: rgba(239,233,220,.16) !important;
    border: 1px solid rgba(239,233,220,.26) !important;
    color: var(--jic-cream) !important;
    backdrop-filter: blur(8px) !important;
  }

  /* Services mobile: residential/commercial strips should scroll horizontally and remain responsive. */
  .services-page .services-work-strip {
    min-height: auto !important;
    padding: 50px 0 30px !important;
  }
  .services-page .services-work-strip + .services-work-strip {
    padding-top: 4px !important;
  }
  .services-page .services-work-strip .work-scroll-head {
    padding-top: 14px !important;
    margin-bottom: 12px !important;
  }
  .services-page .service-horizontal-track.service-work-cards {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(84vw, 350px) !important;
    gap: 16px !important;
    overflow-x: auto !important;
    padding: 8px 14px 18px 0 !important;
    transform: none !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .services-page .service-horizontal-track.service-work-cards::-webkit-scrollbar { display: none !important; }
  .services-page .service-work-slide {
    position: relative !important;
    top: auto !important;
    width: auto !important;
    height: 450px !important;
    min-height: 450px !important;
    margin: 0 !important;
    scroll-snap-align: start !important;
  }
  .services-page .service-work-slide::after {
    right: 14px !important;
    top: 16px !important;
    transform: none !important;
    width: 44px !important;
    height: 44px !important;
    background: rgba(239,233,220,.18) !important;
  }
  .services-page .service-work-slide .image-card-content::after {
    right: 28px !important;
    top: 36px !important;
    transform: none !important;
  }

  /* Enquiries mobile: route order, longer cards, tighter spacing after scroll note. */
  .enquiries-page .contact-scroll-deck { margin-top: 48px !important; }
  .enquiries-page .contact-scroll-card {
    min-height: 308px !important;
    margin-bottom: 18px !important;
  }
  .enquiries-page .contact-scroll-card.route-2 { order: 1 !important; }
  .enquiries-page .contact-scroll-card.route-3 { order: 2 !important; }
  .enquiries-page .contact-scroll-card.route-4 { order: 3 !important; }
  .enquiries-page .contact-scroll-card.route-1 { order: 4 !important; }
  .enquiries-page .scroll-note {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    display: inline-block !important;
  }
}
@media (min-width: 981px) {
  .whatsapp-mini:not(.is-minimised) .wa-mini-open { display: none !important; }
  .whatsapp-mini.is-minimised {
    display: block !important;
    overflow: hidden !important;
    background: rgba(18,24,23,.54) !important;
  }
  .whatsapp-mini.is-minimised .wa-video-pane,
  .whatsapp-mini.is-minimised .wa-icon-pane,
  .whatsapp-mini.is-minimised .wa-mini-close { display: none !important; }
  .whatsapp-mini.is-minimised .wa-mini-open {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--jic-cream) !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
    cursor: pointer !important;
  }
}
.preloader-line {
  opacity: 0 !important;
  transform: translateY(8px) !important;
  transition: opacity .28s ease, transform .28s ease !important;
}
.preloader.stage-50 .preloader-line {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* V25 final tightening: faster loader, smaller WhatsApp, clipped chatbot fix, refined card motion and mobile flow. */

/* Faster loader: logo appears first, all text fades in quickly and cleanly. */
.preloader-inner { width: min(520px, calc(100% - 44px)) !important; }
.preloader-logo { opacity: 1 !important; transform: none !important; }
.preloader-brand,
.preloader-tagline {
  opacity: 0 !important;
  transform: translateY(10px) !important;
  transition: opacity .28s cubic-bezier(.22,1,.36,1), transform .28s cubic-bezier(.22,1,.36,1) !important;
}
.preloader.stage-50 .preloader-brand,
.preloader.stage-90 .preloader-tagline {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.preloader-line,
.preloader-count { display: none !important; }
.preloader { transition: opacity .28s cubic-bezier(.22,1,.36,1), visibility .28s cubic-bezier(.22,1,.36,1) !important; }

/* Keep chatbot fully visible under the floating header. */
.chatbot-panel {
  max-height: min(500px, calc(100vh - 178px)) !important;
  bottom: 82px !important;
}
.chatbot-body { max-height: calc(min(500px, calc(100vh - 178px)) - 104px) !important; }
@media (max-width: 980px) {
  .chatbot-panel {
    max-height: min(62vh, 470px) !important;
    bottom: 82px !important;
  }
  .chatbot-body { max-height: calc(min(62vh, 470px) - 104px) !important; }
}

/* Desktop WhatsApp: smaller launched card, top minimiser, compact QR card. */
@media (min-width: 981px) {
  .whatsapp-mini:not(.is-minimised) {
    left: 18px !important;
    right: auto !important;
    bottom: 18px !important;
    width: 206px !important;
    min-height: 86px !important;
    grid-template-columns: 1fr 72px !important;
    gap: 5px !important;
    padding: 5px !important;
    border-radius: 12px !important;
  }
  .whatsapp-mini .wa-video-pane,
  .whatsapp-mini .wa-icon-pane {
    min-height: 74px !important;
    border-radius: 9px !important;
  }
  .whatsapp-mini .wa-icon-pane svg { width: 28px !important; height: 28px !important; }
  .whatsapp-mini .wa-mini-close {
    top: -26px !important;
    right: 8px !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 999px !important;
    font-size: 1rem !important;
    line-height: 1 !important;
  }
  .whatsapp-qr-panel {
    width: min(226px, calc(100vw - 32px)) !important;
    left: 18px !important;
    bottom: 116px !important;
    padding: 18px 16px 14px !important;
    border-radius: 0 !important;
  }
  .whatsapp-qr-close { right: 8px !important; top: 6px !important; font-size: 1.45rem !important; }
  .whatsapp-qr-panel img { width: 92px !important; height: 92px !important; margin: 2px auto 12px !important; }
  .whatsapp-qr-panel h3 { font-size: 1.22rem !important; letter-spacing: -.02em !important; margin-bottom: 7px !important; }
  .whatsapp-qr-panel p { font-size: .78rem !important; line-height: 1.35 !important; margin-bottom: 12px !important; }
  .whatsapp-qr-action { min-height: 42px !important; padding: 0 8px 0 10px !important; font-size: .66rem !important; letter-spacing: .02em !important; }
  .whatsapp-qr-action span:last-child { width: 32px !important; height: 30px !important; font-size: 1.1rem !important; }
}

/* Desktop About / Why Choose Us: restore visible cards and move them with scroll. */
@media (min-width: 981px) {
  .about-page .why-section.why-card-stack,
  .about-page .why-section.why-story-scroll {
    background: var(--jic-cream) !important;
    color: var(--jic-ink) !important;
    min-height: 305vh !important;
    overflow: clip !important;
    padding: 0 !important;
  }
  .about-page .why-card-stack > .container,
  .about-page .why-section.why-story-scroll > .container {
    position: sticky !important;
    top: 0 !important;
    height: 100svh !important;
    display: grid !important;
    grid-template-columns: minmax(430px, .9fr) minmax(560px, 1.1fr) !important;
    gap: clamp(40px, 5vw, 110px) !important;
    align-items: center !important;
    overflow: hidden !important;
    padding: clamp(92px, 10vh, 132px) clamp(24px, 2vw, 40px) clamp(56px, 6vh, 90px) !important;
  }
  .about-page .why-desktop-copy {
    max-width: 720px !important;
    width: 100% !important;
    align-self: center !important;
  }
  .about-page .why-desktop-copy .section-intro { max-width: 680px !important; }
  .about-page .why-card-stack .why-grid,
  .about-page .why-stack-track {
    position: relative !important;
    display: block !important;
    height: min(720px, 76svh) !important;
    width: 100% !important;
    overflow: visible !important;
  }
  .about-page .why-card-stack .why-item {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: min(530px, 43vw) !important;
    min-height: 392px !important;
    border-radius: 18px !important;
    background: rgba(239,233,220,.74) !important;
    border: 1px solid rgba(18,24,23,.18) !important;
    box-shadow: 0 34px 95px rgba(18,24,23,.12) !important;
    opacity: 1 !important;
    visibility: visible !important;
    will-change: transform !important;
  }
}

/* Enquiries first block: no scroll text, slower one-by-one route cards. */
.enquiries-page .scroll-note { display: none !important; }
@media (min-width: 981px) {
  .enquiries-page .contact-hero.contact-scroll-hero { min-height: 385vh !important; }
  .enquiries-page .contact-scroll-card {
    opacity: 1 !important;
    visibility: visible !important;
    transition: transform .12s linear, opacity .12s linear !important;
  }
}

/* Appointment overlay typography: more premium appointment option cards. */
.booking-overlay .overlay-booking-options a b {
  font-family: "Instrument Serif", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(2.2rem, 3.2vw, 3.8rem) !important;
  line-height: .9 !important;
  letter-spacing: -.055em !important;
}
.booking-overlay .overlay-booking-options a span {
  font-family: "Manrope", system-ui, sans-serif !important;
  letter-spacing: .2em !important;
}
.booking-overlay .overlay-booking-options a small {
  opacity: .76 !important;
  line-height: 1.35 !important;
}

/* Mobile refinements. */
@media (max-width: 980px) {
  /* Home About: no vertical stack scroll; simple premium overlap of text over image. */
  .home-page .about-overlap {
    min-height: auto !important;
    padding: 46px 0 54px !important;
    overflow: visible !important;
  }
  .home-page .about-stage {
    min-height: auto !important;
    display: block !important;
    position: relative !important;
  }
  .home-page .about-image {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    height: clamp(310px, 52vh, 470px) !important;
    border-radius: 30px !important;
    z-index: 1 !important;
    margin: 0 !important;
  }
  .home-page .about-card {
    position: relative !important;
    top: auto !important;
    width: calc(100% - 26px) !important;
    min-height: auto !important;
    z-index: 2 !important;
    margin: -92px auto 0 !important;
    transform: none !important;
    padding: 30px 24px 34px !important;
    border-radius: 30px !important;
    background: rgba(239,233,220,.88) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255,255,255,.38) !important;
    box-shadow: 0 24px 70px rgba(18,24,23,.16) !important;
  }

  /* Mobile About first block: remove image and replace with a composed editorial card. */
  .about-page .about-cinematic {
    padding: 104px 0 40px !important;
    background:
      radial-gradient(circle at 85% 5%, rgba(156,171,136,.28), transparent 34%),
      linear-gradient(180deg, var(--jic-ink), #202622 58%, var(--jic-cream) 58%) !important;
  }
  .about-page .about-cinematic .about-image { display: none !important; }
  .about-page .about-cinematic .about-stage { display: block !important; min-height: auto !important; }
  .about-page .about-cinematic .about-card {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 36px 25px 48px !important;
    border-radius: 34px !important;
    background: linear-gradient(145deg, rgba(239,233,220,.98), rgba(216,208,198,.94)) !important;
    box-shadow: 0 28px 80px rgba(0,0,0,.22) !important;
    border: 1px solid rgba(255,255,255,.44) !important;
    overflow: hidden !important;
  }
  .about-page .about-cinematic .about-card::before {
    content: "JIC" !important;
    position: absolute !important;
    right: -8px !important;
    top: 2px !important;
    font-family: "Instrument Serif", Georgia, serif !important;
    font-size: 6.8rem !important;
    line-height: 1 !important;
    color: rgba(18,24,23,.06) !important;
    pointer-events: none !important;
  }
/* V85 removed mobile About intro tag pseudo-element. */
  .about-page .about-cinematic .about-card p { margin-bottom: 18px !important; }

  /* Mobile About Why: visible cards in a premium See-Our-Work-like stack while preserving the block colour. */
  .about-page .why-section.why-card-stack,
  .about-page .why-section.why-story-scroll {
    background: var(--jic-cream) !important;
    min-height: auto !important;
    padding: 54px 0 52px !important;
    overflow: visible !important;
  }
  .about-page .why-card-stack > .container {
    position: static !important;
    height: auto !important;
    display: block !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  .about-page .why-desktop-copy {
    text-align: left !important;
    margin: 0 0 26px !important;
  }
  .about-page .why-desktop-copy h2 { font-size: clamp(3.2rem, 15vw, 5.2rem) !important; }
  .about-page .why-desktop-copy .section-intro { text-align: left !important; margin: 14px 0 0 !important; }
  .about-page .why-stack-track {
    display: block !important;
    height: auto !important;
    width: 100% !important;
    overflow: visible !important;
  }
  .about-page .why-card-stack .why-item {
    position: sticky !important;
    left: auto !important;
    top: 92px !important;
    width: 100% !important;
    min-height: 390px !important;
    margin: 0 0 20px !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    border-radius: 30px !important;
    background: rgba(239,233,220,.96) !important;
    border: 1px solid rgba(18,24,23,.12) !important;
    box-shadow: 0 24px 72px rgba(18,24,23,.14) !important;
  }
  .about-page .why-card-stack .why-item:nth-child(2) { top: 108px !important; z-index: 2 !important; }
  .about-page .why-card-stack .why-item:nth-child(3) { top: 124px !important; z-index: 3 !important; }

  /* Mobile About painting services: horizontal integrated strip with refined, non-text scroll cue. */
  .about-page .about-services-showcase { padding: 56px 0 50px !important; }
  .about-page .about-services-showcase .work-track-shell {
    width: 100% !important;
    overflow: visible !important;
    padding-inline: 0 !important;
  }
  .about-page .about-services-showcase .about-service-cards {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(86vw, 350px) !important;
    gap: 14px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    padding: 0 16px 18px !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .about-page .about-services-showcase .about-service-cards .image-card {
    position: relative !important;
    top: auto !important;
    width: auto !important;
    height: 430px !important;
    min-height: 430px !important;
    margin: 0 !important;
    scroll-snap-align: center !important;
  }
  .about-page .about-services-showcase .work-scroll-head .section-header::after { content: none !important; display: none !important; }
  .about-page .about-services-showcase .work-track-shell::after,
  .services-page .service-track-shell::after {
    content: "" !important;
    position: absolute !important;
    right: 24px !important;
    bottom: 0 !important;
    width: 68px !important;
    height: 4px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, rgba(239,233,220,.2), rgba(239,233,220,.88), rgba(156,171,136,.9)) !important;
    box-shadow: 0 0 24px rgba(239,233,220,.25) !important;
    pointer-events: none !important;
  }

  /* Mobile services card strips: integrated horizontal card deck with elegant cue and matched commercial spacing. */
  .services-page .services-work-strip {
    padding: 48px 0 36px !important;
    min-height: auto !important;
    overflow: visible !important;
  }
  .services-page .services-work-strip + .services-work-strip {
    padding-top: 48px !important;
    margin-top: 0 !important;
  }
  .services-page .services-work-strip .work-scroll-head { padding-top: 0 !important; margin-bottom: 18px !important; }
  .services-page .service-track-shell {
    width: 100% !important;
    overflow: visible !important;
    padding: 0 !important;
    position: relative !important;
  }
  .services-page .service-horizontal-track.service-work-cards {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(86vw, 360px) !important;
    gap: 14px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 16px 18px !important;
    transform: none !important;
  }
  .services-page .service-horizontal-track.service-work-cards::-webkit-scrollbar,
  .about-page .about-services-showcase .about-service-cards::-webkit-scrollbar { display: none !important; }
  .services-page .service-work-slide {
    position: relative !important;
    top: auto !important;
    width: auto !important;
    height: 440px !important;
    min-height: 440px !important;
    margin: 0 !important;
    scroll-snap-align: center !important;
  }
  .services-page .service-work-slide::after {
    right: 18px !important;
    top: 18px !important;
    transform: none !important;
    width: 38px !important;
    height: 38px !important;
    background: rgba(239,233,220,.18) !important;
  }
  .services-page .service-work-slide .image-card-content::after {
    right: 29px !important;
    top: 33px !important;
    transform: none !important;
  }

  /* Enquiries mobile spacing and route cards. */
  .enquiries-page .contact-scroll-hero { padding-bottom: 40px !important; }
  .enquiries-page .contact-scroll-deck { margin-top: 36px !important; }
  .enquiries-page .contact-scroll-card { min-height: 315px !important; }

  /* Mobile appointment overlay: descriptions remain visible while scrolling. */
  .booking-overlay .booking-overlay-inner { gap: 24px !important; }
  .overlay-booking-options a {
    min-height: 260px !important;
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
  }
  .overlay-booking-options a b { font-size: clamp(2.4rem, 11vw, 3.5rem) !important; }
  .overlay-booking-options a small {
    display: block !important;
    margin-top: 12px !important;
    font-size: .94rem !important;
    line-height: 1.45 !important;
    opacity: .82 !important;
  }
}

/* =========================
   V26 precision correction pack
   ========================= */

/* Faster, cleaner loader: logo first, text fades in, then exits quickly. */
.preloader {
  transition: opacity .22s cubic-bezier(.22,1,.36,1), visibility .22s cubic-bezier(.22,1,.36,1) !important;
}
.preloader-brand,
.preloader-tagline {
  opacity: 0 !important;
  transform: translateY(10px) !important;
  transition: opacity .22s ease, transform .22s ease !important;
}
.preloader.stage-50 .preloader-brand,
.preloader.stage-90 .preloader-tagline {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.preloader-line { margin-top: 18px !important; }
.preloader-logo { width: 92px !important; height: 92px !important; }
.preloader-brand { font-size: clamp(1.35rem, 3vw, 3rem) !important; }
.preloader-tagline { font-size: clamp(1.05rem, 1.7vw, 1.85rem) !important; }
@media (max-width: 980px) {
  .preloader-logo { width: 82px !important; height: 82px !important; }
  .preloader-brand { font-size: clamp(1.55rem, 7vw, 2.35rem) !important; }
  .preloader-tagline { font-size: clamp(1rem, 5vw, 1.42rem) !important; }
}

/* Chatbot: shorter panel so the top never clips under the floating header. */
.chatbot-panel {
  max-height: min(430px, calc(100vh - 190px)) !important;
  bottom: 86px !important;
  overflow: hidden !important;
}
.chatbot-body {
  max-height: calc(min(430px, calc(100vh - 190px)) - 92px) !important;
  overflow-y: auto !important;
}
@media (max-width: 980px) {
  .chatbot-panel {
    max-height: min(62vh, 420px) !important;
    bottom: 78px !important;
  }
  .chatbot-body { max-height: calc(min(62vh, 420px) - 92px) !important; }
}

/* Desktop WhatsApp: smaller transparent split card, with a clear top minimise control. */
@media (min-width: 981px) {
  .whatsapp-mini {
    left: 22px !important;
    right: auto !important;
    bottom: 22px !important;
    width: 158px !important;
    height: 70px !important;
    padding: 5px !important;
    gap: 6px !important;
    grid-template-columns: 68px 1fr !important;
    border-radius: 13px !important;
    background: rgba(18,24,23,.22) !important;
    border: 1px solid rgba(239,233,220,.32) !important;
    backdrop-filter: blur(16px) saturate(1.08) !important;
    box-shadow: 0 18px 46px rgba(18,24,23,.26) !important;
    overflow: visible !important;
  }
  .whatsapp-mini .wa-video-pane,
  .whatsapp-mini .wa-icon-pane,
  .whatsapp-mini > video,
  .whatsapp-mini .wa-mini-body a {
    border-radius: 10px !important;
    overflow: hidden !important;
  }
  .whatsapp-mini .wa-video-pane,
  .whatsapp-mini > video {
    width: 68px !important;
    height: 60px !important;
    min-height: 60px !important;
  }
  .whatsapp-mini video {
    width: 68px !important;
    height: 60px !important;
    min-height: 60px !important;
    object-fit: cover !important;
    opacity: .9 !important;
  }
  .whatsapp-mini .wa-icon-pane,
  .whatsapp-mini .wa-mini-body a {
    width: 74px !important;
    height: 60px !important;
    min-height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(18,24,23,.22) !important;
    border: 1px solid rgba(239,233,220,.24) !important;
    color: #25d366 !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
  }
  .whatsapp-mini .wa-icon-pane svg { width: 28px !important; height: 28px !important; }
  .wa-mini-body { padding: 0 !important; align-items: stretch !important; justify-content: stretch !important; }
  .wa-mini-body strong { display: none !important; }
  .wa-mini-close {
    position: absolute !important;
    top: -22px !important;
    right: 4px !important;
    z-index: 20 !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background: rgba(239,233,220,.78) !important;
    color: rgba(18,24,23,.72) !important;
    border: 1px solid rgba(18,24,23,.16) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.18) !important;
    font-size: 0 !important;
    line-height: 1 !important;
    cursor: pointer !important;
  }
  .wa-mini-close::before { content: "–"; font-size: 1rem; font-weight: 800; transform: translateY(-1px); }
  .whatsapp-mini.is-minimised {
    width: 54px !important;
    height: 54px !important;
    border-radius: 999px !important;
    padding: 0 !important;
    grid-template-columns: 1fr !important;
    overflow: hidden !important;
  }
  .whatsapp-mini.is-minimised .wa-mini-open {
    display: inline-flex !important;
    width: 100% !important;
    height: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(18,24,23,.46) !important;
    color: var(--jic-cream) !important;
    border: 0 !important;
    font-size: .7rem !important;
    font-weight: 900 !important;
  }
  .whatsapp-mini.is-minimised .wa-video-pane,
  .whatsapp-mini.is-minimised .wa-icon-pane,
  .whatsapp-mini.is-minimised .wa-mini-close,
  .whatsapp-mini.is-minimised video,
  .whatsapp-mini.is-minimised .wa-mini-body { display: none !important; }
}

/* WhatsApp QR prompt: anchored by the mini card and reduced by half. */
.whatsapp-qr-panel {
  width: min(212px, calc(100vw - 28px)) !important;
  left: 18px !important;
  bottom: 104px !important;
  padding: 18px 16px 14px !important;
  border-radius: 14px !important;
  background: rgba(239,233,220,.96) !important;
  box-shadow: 0 24px 62px rgba(18,24,23,.28) !important;
}
.whatsapp-qr-panel img { width: 90px !important; height: 90px !important; margin-bottom: 12px !important; }
.whatsapp-qr-panel h3 { font-size: 1.15rem !important; margin-bottom: 6px !important; }
.whatsapp-qr-panel p { font-size: .75rem !important; line-height: 1.35 !important; margin-bottom: 12px !important; }
.whatsapp-qr-action { min-height: 40px !important; padding: 0 9px 0 12px !important; font-size: .66rem !important; border-radius: 6px !important; }
.whatsapp-qr-action span:last-child { width: 31px !important; height: 30px !important; font-size: 1.1rem !important; border-radius: 5px !important; }
.whatsapp-qr-close { top: 6px !important; right: 8px !important; font-size: 1.25rem !important; }
@media (max-width: 980px) { .whatsapp-qr-panel { display: none !important; } }

/* About desktop: restore Why Choose Us cards and card-stack motion base. */
@media (min-width: 981px) {
  .about-page .why-section.why-card-stack,
  .about-page .why-section.why-story-scroll {
    display: block !important;
    background: var(--jic-cream) !important;
    color: var(--jic-ink) !important;
    min-height: 360vh !important;
    overflow: clip !important;
    padding: 0 !important;
  }
  .about-page .why-card-stack > .container,
  .about-page .why-section.why-story-scroll > .container {
    position: sticky !important;
    top: 0 !important;
    height: 100svh !important;
    display: grid !important;
    grid-template-columns: minmax(420px, .92fr) minmax(580px, 1.08fr) !important;
    gap: clamp(44px, 5vw, 112px) !important;
    align-items: center !important;
    overflow: visible !important;
    padding: clamp(82px, 10vh, 118px) clamp(24px, 2vw, 42px) clamp(54px, 6vh, 84px) !important;
  }
  .about-page .why-desktop-copy {
    max-width: 760px !important;
    width: 100% !important;
    text-align: left !important;
    z-index: 4 !important;
  }
  .about-page .why-desktop-copy .section-title { max-width: 760px !important; }
  .about-page .why-desktop-copy .section-intro { max-width: 680px !important; text-align: left !important; }
  .about-page .why-stack-track,
  .about-page .why-card-stack .why-grid {
    position: relative !important;
    display: block !important;
    height: min(680px, 72svh) !important;
    min-height: 520px !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    margin: 0 !important;
  }
  .about-page .why-card-stack .why-item {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: min(520px, 42vw) !important;
    min-height: 388px !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 34px 32px !important;
    border-radius: 18px !important;
    background: rgba(239,233,220,.68) !important;
    border: 1px solid rgba(18,24,23,.20) !important;
    box-shadow: 0 36px 100px rgba(18,24,23,.13) !important;
    color: var(--jic-ink) !important;
    transform: translate3d(-50%, -50%, 0) !important;
    will-change: transform !important;
  }
  .about-page .why-card-stack .why-item svg { display: block !important; width: 86px !important; height: 86px !important; margin: 0 0 auto !important; color: var(--jic-ink) !important; }
  .about-page .why-card-stack .why-item h3 { font-size: clamp(1.6rem, 2.1vw, 2.3rem) !important; line-height: 1.02 !important; margin: auto 0 16px !important; }
  .about-page .why-card-stack .why-item p { color: rgba(18,24,23,.70) !important; }
}

/* Enquiries desktop: slower route-card reveal, one by one, no scroll label. */
.enquiries-page .scroll-note { display: none !important; }
@media (min-width: 981px) {
  .enquiries-page .contact-hero.contact-scroll-hero { min-height: 455vh !important; }
  .enquiries-page .contact-scroll-card {
    opacity: 0 !important;
    visibility: visible !important;
    will-change: transform, opacity !important;
  }
}

/* Seamless flow: soften block cuts and make sections feel designed as one experience. */
main > section { border-top: 0 !important; }
.dark-band,
.portfolio-section,
.services-deep,
.enquiry-cta-section,
.testimonials,
.contact-form-section,
.booking-section {
  border: 0 !important;
}

/* Appointment overlay: more editorial, premium option typography. */
.booking-overlay .overlay-booking-options a b {
  font-family: "Instrument Serif", Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: -.05em !important;
  line-height: .9 !important;
}

@media (max-width: 980px) {
  /* Mobile home About: simple overlap only, no vertical/sticky scrolling. */
  .home-page .about-overlap {
    min-height: auto !important;
    height: auto !important;
    padding: 42px 0 46px !important;
    overflow: visible !important;
  }
  .home-page .about-stage {
    display: block !important;
    min-height: auto !important;
    height: auto !important;
    position: relative !important;
    overflow: visible !important;
  }
  .home-page .about-image {
    position: relative !important;
    top: auto !important;
    height: clamp(290px, 48vh, 420px) !important;
    margin: 0 !important;
    border-radius: 28px !important;
    z-index: 1 !important;
  }
  .home-page .about-card {
    position: relative !important;
    top: auto !important;
    transform: none !important;
    width: calc(100% - 28px) !important;
    margin: -82px auto 0 !important;
    z-index: 2 !important;
    background: rgba(239,233,220,.88) !important;
    backdrop-filter: blur(12px) !important;
    border-radius: 28px !important;
    padding: 28px 22px 30px !important;
  }

  /* Mobile About intro: clean, classy, brand-aligned editorial card. */
  .about-page .about-cinematic {
    padding: 104px 0 46px !important;
    background:
      radial-gradient(circle at 20% 8%, rgba(156,171,136,.34), transparent 34%),
      radial-gradient(circle at 88% 0%, rgba(185,171,152,.22), transparent 30%),
      linear-gradient(180deg, #121817 0%, #202621 58%, #efe9dc 58%, #efe9dc 100%) !important;
  }
  .about-page .about-cinematic .about-stage { display: block !important; min-height: auto !important; }
  .about-page .about-cinematic .about-image { display: none !important; }
  .about-page .about-cinematic .about-card {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 34px 24px 44px !important;
    border-radius: 34px !important;
    color: var(--jic-ink) !important;
    background: linear-gradient(145deg, rgba(239,233,220,.98), rgba(212,203,190,.95)) !important;
    border: 1px solid rgba(255,255,255,.50) !important;
    box-shadow: 0 30px 90px rgba(0,0,0,.24) !important;
    overflow: hidden !important;
  }
  .about-page .about-cinematic .about-card::before {
    content: "Fine finishes\\A for properties" !important;
    white-space: pre-line !important;
    position: absolute !important;
    right: -10px !important;
    bottom: -10px !important;
    font-family: "Instrument Serif", Georgia, serif !important;
    font-style: italic !important;
    font-size: clamp(3rem, 15vw, 5.8rem) !important;
    line-height: .82 !important;
    letter-spacing: -.06em !important;
    color: rgba(18,24,23,.06) !important;
    pointer-events: none !important;
  }
  .about-page .about-cinematic .about-card h1,
  .about-page .about-cinematic .about-card .section-title {
    font-family: "Instrument Serif", Georgia, serif !important;
    font-weight: 400 !important;
    font-size: clamp(4rem, 18vw, 6rem) !important;
    line-height: .86 !important;
    letter-spacing: -.06em !important;
  }
  .about-page .about-cinematic .about-card p {
    position: relative !important;
    z-index: 1 !important;
    margin-bottom: 22px !important;
  }

  /* Mobile About Why: restore cards and use a premium sticky stacked pattern, keeping block colour. */
  .about-page .why-section.why-card-stack,
  .about-page .why-section.why-story-scroll {
    background: var(--jic-cream) !important;
    color: var(--jic-ink) !important;
    min-height: auto !important;
    padding: 54px 0 50px !important;
    overflow: visible !important;
  }
  .about-page .why-card-stack > .container,
  .about-page .why-section.why-story-scroll > .container {
    position: static !important;
    height: auto !important;
    display: block !important;
    padding: 0 18px !important;
    overflow: visible !important;
  }
  .about-page .why-desktop-copy { display: block !important; text-align: left !important; margin-bottom: 24px !important; }
  .about-page .why-desktop-copy h2 { font-size: clamp(3.2rem, 15vw, 5.2rem) !important; }
  .about-page .why-desktop-copy .section-intro { text-align: left !important; margin: 12px 0 0 !important; }
  .about-page .why-stack-track,
  .about-page .why-card-stack .why-grid {
    display: block !important;
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .about-page .why-card-stack .why-item {
    display: flex !important;
    position: sticky !important;
    left: auto !important;
    top: 88px !important;
    width: 100% !important;
    min-height: 372px !important;
    margin: 0 0 20px !important;
    padding: 28px 24px !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    border-radius: 30px !important;
    background: rgba(239,233,220,.96) !important;
    border: 1px solid rgba(18,24,23,.13) !important;
    box-shadow: 0 26px 74px rgba(18,24,23,.15) !important;
  }
  .about-page .why-card-stack .why-item:nth-child(2) { top: 104px !important; }
  .about-page .why-card-stack .why-item:nth-child(3) { top: 120px !important; }

  /* Mobile horizontal-scroll progress/cue: integrated progress rail, no floating arrow. */
  .about-page .about-services-showcase,
  .services-page .services-work-strip {
    overflow: visible !important;
  }
  .about-page .about-services-showcase .work-track-shell,
  .services-page .service-track-shell {
    position: relative !important;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  .about-page .about-services-showcase .work-track-shell::after,
  .services-page .service-track-shell::after {
    content: none !important;
  }
  .about-page .about-services-showcase .about-service-cards,
  .services-page .service-horizontal-track.service-work-cards {
    padding: 0 16px 18px !important;
    scroll-padding-inline: 16px !important;
    gap: 14px !important;
  }
  .deck-progress {
    width: min(148px, 44vw);
    height: 3px;
    margin: 14px auto 0;
    border-radius: 999px;
    background: rgba(18,24,23,.12);
    overflow: hidden;
  }
  .dark-band .deck-progress { background: rgba(239,233,220,.14); }
  .deck-progress span {
    display: block;
    height: 100%;
    width: calc(var(--deck-progress, .12) * 100%);
    min-width: 18%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--jic-stone), var(--jic-muted-taupe));
    box-shadow: 0 0 18px rgba(156,171,136,.34);
    transition: width .12s linear;
  }

  /* Mobile services: matched spacing above Residential and Commercial headers. */
  .services-page .services-work-strip,
  .services-page .services-work-strip + .services-work-strip {
    padding-top: 42px !important;
    padding-bottom: 34px !important;
    margin-top: 0 !important;
  }
  .services-page .services-work-strip .work-scroll-head { padding-top: 0 !important; margin-bottom: 16px !important; }

  /* Mobile enquiries: tighter first route block after final card. */
  .enquiries-page .contact-scroll-hero { padding-bottom: 22px !important; }
  .enquiries-page .contact-scroll-deck { margin-top: 28px !important; margin-bottom: 0 !important; }
  .enquiries-page .contact-scroll-card:last-child { margin-bottom: 0 !important; }

  /* Mobile booking overlay: cards flip to reveal descriptions as they become active while scrolling. */
  .booking-overlay .overlay-booking-options {
    perspective: 1100px !important;
    scroll-snap-type: x mandatory !important;
  }
  .booking-overlay .overlay-booking-options a {
    position: relative !important;
    transform-style: preserve-3d !important;
    transition: transform .45s cubic-bezier(.22,1,.36,1) !important;
    overflow: hidden !important;
  }
  .booking-overlay .overlay-booking-options a small {
    opacity: 0 !important;
    transform: translateY(10px) !important;
    transition: opacity .24s ease, transform .24s ease !important;
  }
  .booking-overlay .overlay-booking-options a.is-description-visible small,
  .booking-overlay .overlay-booking-options a:focus small {
    opacity: .88 !important;
    transform: translateY(0) !important;
  }
  .booking-overlay .overlay-booking-options a.is-description-visible {
    transform: rotateY(5deg) translateY(-4px) !important;
  }
}

/* ===============================
   V27 correction layer — final precision fixes
   =============================== */

/* Much faster loader: logo first, copy fades in, shorter exit. */
.preloader { transition: opacity .18s ease, visibility .18s ease !important; }
.preloader-line { margin-top: 18px !important; }
.preloader-brand,
.preloader-tagline { transition: opacity .18s ease, transform .18s ease !important; }

/* Desktop WhatsApp: smaller split card, clear minimiser ABOVE the card, smaller QR prompt. */
@media (min-width: 981px) {
  .whatsapp-mini {
    left: 18px !important;
    right: auto !important;
    bottom: 18px !important;
    width: 214px !important;
    min-height: 96px !important;
    grid-template-columns: 1fr 74px !important;
    padding: 5px !important;
    gap: 5px !important;
    border-radius: 12px !important;
    overflow: visible !important;
    background: rgba(18,24,23,.12) !important;
    border: 1px solid rgba(239,233,220,.34) !important;
    backdrop-filter: blur(14px) !important;
  }
  .whatsapp-mini .wa-video-pane,
  .whatsapp-mini .wa-icon-pane,
  .whatsapp-mini video {
    min-height: 86px !important;
    height: 86px !important;
    border-radius: 9px !important;
  }
  .whatsapp-mini .wa-icon-pane svg { width: 29px !important; height: 29px !important; }
  .whatsapp-mini .wa-mini-close {
    display: inline-flex !important;
    position: absolute !important;
    top: -30px !important;
    right: 6px !important;
    z-index: 30 !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 999px !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(18,24,23,.28) !important;
    border: 1px solid rgba(239,233,220,.52) !important;
    color: var(--jic-cream) !important;
    font-size: 1.05rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.18) !important;
  }
  .whatsapp-mini.is-minimised {
    width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    border-radius: 999px !important;
    display: block !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: rgba(18,24,23,.55) !important;
  }
  .whatsapp-mini.is-minimised .wa-mini-open {
    display: inline-flex !important;
    width: 100% !important;
    height: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--jic-cream) !important;
    background: transparent !important;
    border: 0 !important;
    font-weight: 800 !important;
  }
  .whatsapp-mini.is-minimised .wa-video-pane,
  .whatsapp-mini.is-minimised .wa-icon-pane,
  .whatsapp-mini.is-minimised .wa-mini-close { display: none !important; }
  .whatsapp-qr-panel {
    left: 18px !important;
    bottom: 126px !important;
    width: 196px !important;
    padding: 18px 16px 14px !important;
    border-radius: 2px !important;
  }
  .whatsapp-qr-panel img { width: 92px !important; height: 92px !important; margin-bottom: 12px !important; }
  .whatsapp-qr-panel h3 { font-size: 1.08rem !important; letter-spacing: .02em !important; margin-bottom: 7px !important; }
  .whatsapp-qr-panel p { font-size: .74rem !important; line-height: 1.35 !important; margin-bottom: 12px !important; }
  .whatsapp-qr-action { min-height: 39px !important; padding: 0 9px 0 10px !important; font-size: .64rem !important; }
  .whatsapp-qr-action span:last-child { width: 32px !important; height: 30px !important; font-size: 1.1rem !important; }
  .whatsapp-qr-close { top: 6px !important; right: 8px !important; font-size: 1.25rem !important; }
}

/* Chatbot: slightly shorter again so it clears the floating navigation during scroll. */
.chatbot-panel { max-height: min(500px, calc(100vh - 156px)) !important; bottom: 82px !important; }
.chatbot-body { max-height: calc(min(500px, calc(100vh - 156px)) - 100px) !important; }
@media (max-width: 980px) {
  .chatbot-panel { max-height: min(62vh, 470px) !important; }
  .chatbot-body { max-height: calc(min(62vh, 470px) - 100px) !important; }
}

/* Desktop About / Why Choose Us: restore visible card stack, keep block colour, Pieter-style motion. */
@media (min-width: 981px) {
  .about-page .why-section.why-card-stack {
    background: var(--jic-cream) !important;
    color: var(--jic-ink) !important;
    min-height: 310vh !important;
    overflow: clip !important;
  }
  .about-page .why-card-stack > .container {
    grid-template-columns: minmax(430px, .92fr) minmax(540px, 1.08fr) !important;
    gap: clamp(44px, 6vw, 110px) !important;
    align-items: center !important;
  }
  .about-page .why-desktop-copy { max-width: 760px !important; }
  .about-page .why-desktop-copy .section-intro { max-width: 700px !important; }
  .about-page .why-stack-track,
  .about-page .why-card-stack .why-grid {
    height: min(720px, 78svh) !important;
    overflow: visible !important;
  }
  .about-page .why-card-stack .why-item {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: min(520px, 42vw) !important;
    min-height: 405px !important;
    border-radius: 22px !important;
    padding: 36px 34px !important;
    background: rgba(239,233,220,.58) !important;
    border: 1px solid rgba(18,24,23,.23) !important;
    box-shadow: none !important;
    justify-content: flex-end !important;
  }
  .about-page .why-card-stack .why-item svg { width: 76px !important; height: 76px !important; margin-bottom: auto !important; opacity: .92 !important; }
  .about-page .why-card-stack .why-item h3 {
    font-size: clamp(2.1rem, 3.8vw, 4.5rem) !important;
    line-height: .92 !important;
    letter-spacing: -.06em !important;
    font-weight: 500 !important;
    max-width: 390px !important;
  }
  .about-page .why-card-stack .why-item p {
    font-family: var(--serif) !important;
    font-style: italic !important;
    font-size: clamp(1.25rem, 2vw, 2rem) !important;
    line-height: 1.08 !important;
    color: rgba(18,24,23,.74) !important;
    max-width: 420px !important;
  }
}

/* Desktop Enquiries: remove scroll text and slow card reveal to one-by-one. */
.enquiries-page .scroll-note { display: none !important; }
@media (min-width: 981px) {
  .enquiries-page .contact-hero.contact-scroll-hero { min-height: 360vh !important; }
  .enquiries-page .contact-scroll-card { transition: opacity .16s linear, transform .16s linear !important; }
}

/* Core block rhythm: softer flow between major sections. */
.home-page .about-overlap + .services-summary { margin-top: 0 !important; padding-top: clamp(42px, 5vw, 72px) !important; }
.luxe-final-cta { border-top: 0 !important; }

@media (max-width: 980px) {
  /* Mobile home About: simple overlap; no vertical scroll/sticky behaviour. */
  .home-page .about-overlap {
    min-height: 0 !important;
    height: auto !important;
    padding: 48px 0 46px !important;
    overflow: visible !important;
  }
  .home-page .about-stage {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    position: relative !important;
  }
  .home-page .about-image {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    height: clamp(285px, 58vw, 420px) !important;
    border-radius: 28px !important;
    z-index: 1 !important;
    margin: 0 !important;
  }
  .home-page .about-card {
    position: relative !important;
    top: auto !important;
    z-index: 2 !important;
    width: calc(100% - 22px) !important;
    margin: -58px auto 0 !important;
    min-height: 0 !important;
    transform: none !important;
    padding: 30px 24px !important;
    border-radius: 28px !important;
    background: rgba(239,233,220,.88) !important;
    backdrop-filter: blur(12px) !important;
  }

  /* Mobile About first block: refined editorial card, no image, spacious finish. */
  .about-page .about-cinematic {
    padding: 106px 0 38px !important;
    background:
      radial-gradient(circle at 82% 10%, rgba(156,171,136,.26), transparent 30%),
      linear-gradient(180deg, rgba(239,233,220,.96), rgba(232,225,214,.92)) !important;
  }
  .about-page .about-cinematic .about-image { display: none !important; }
  .about-page .about-cinematic .about-stage { display: block !important; min-height: 0 !important; }
  .about-page .about-cinematic .about-card {
    position: relative !important;
    width: 100% !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 34px 24px 48px !important;
    background: rgba(18,24,23,.94) !important;
    color: var(--jic-cream) !important;
    border-radius: 34px !important;
    overflow: hidden !important;
    box-shadow: 0 28px 80px rgba(18,24,23,.18) !important;
  }
  .about-page .about-cinematic .about-card::before {
    content: "JIC" !important;
    position: absolute !important;
    right: -10px !important;
    top: -28px !important;
    font-family: var(--serif) !important;
    font-size: 8.4rem !important;
    line-height: 1 !important;
    opacity: .06 !important;
    color: var(--jic-cream) !important;
  }
  .about-page .about-cinematic .about-card .underline { background: rgba(239,233,220,.72) !important; }
  .about-page .about-cinematic .about-card p { color: rgba(239,233,220,.78) !important; padding-bottom: 8px !important; }

  /* Mobile About Why Choose Us: present cards, original colour, premium stacked scroll. */
  .about-page .why-section.why-card-stack {
    background: var(--jic-cream) !important;
    color: var(--jic-ink) !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 56px 0 44px !important;
    overflow: visible !important;
  }
  .about-page .why-card-stack > .container {
    position: static !important;
    display: block !important;
    height: auto !important;
    padding-block: 0 !important;
    overflow: visible !important;
  }
  .about-page .why-desktop-copy {
    text-align: left !important;
    margin: 0 0 28px !important;
    max-width: none !important;
  }
  .about-page .why-desktop-copy h2 { font-size: clamp(3.1rem, 16vw, 5.2rem) !important; line-height: .92 !important; }
  .about-page .why-desktop-copy .section-intro { text-align: left !important; margin: 18px 0 0 !important; max-width: none !important; }
  .about-page .why-stack-track,
  .about-page .why-card-stack .why-grid {
    display: block !important;
    height: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }
  .about-page .why-card-stack .why-item {
    position: sticky !important;
    left: auto !important;
    top: 92px !important;
    width: 100% !important;
    min-height: 390px !important;
    margin: 0 0 18px !important;
    padding: 30px 24px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    border-radius: 30px !important;
    background: rgba(255,255,255,.56) !important;
    border: 1px solid rgba(18,24,23,.14) !important;
    box-shadow: 0 20px 55px rgba(18,24,23,.08) !important;
    z-index: 1 !important;
  }
  .about-page .why-card-stack .why-item:nth-child(2) { top: 108px !important; z-index: 2 !important; }
  .about-page .why-card-stack .why-item:nth-child(3) { top: 124px !important; z-index: 3 !important; }

  /* Mobile horizontal-card sections: integrated, no arrow above, elegant progress rail. */
  .about-page .about-services-showcase,
  .services-page .services-work-strip {
    padding: 54px 0 44px !important;
    overflow: hidden !important;
  }
  .about-page .about-services-showcase .container,
  .services-page .services-work-strip .container,
  .about-page .about-services-showcase .work-track-shell,
  .services-page .services-work-strip .work-track-shell,
  .services-page .services-work-strip .service-track-shell {
    width: 100% !important;
    max-width: none !important;
    padding-left: 16px !important;
    padding-right: 0 !important;
  }
  .about-page .about-services-showcase .work-scroll-head,
  .services-page .services-work-strip .work-scroll-head {
    width: 100% !important;
    max-width: none !important;
    padding: 0 16px 0 16px !important;
    margin-bottom: 18px !important;
  }
  .about-page .about-services-showcase .work-scroll-head .section-header::after,
  .services-page .services-work-strip .section-header::after,
  .services-page .services-work-strip .section-header::before { content: none !important; display: none !important; }
  .about-page .about-service-cards,
  .services-page .service-horizontal-track.service-work-cards {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 16px 16px 0 !important;
    transform: none !important;
  }
  .about-page .about-service-cards::-webkit-scrollbar,
  .services-page .service-horizontal-track.service-work-cards::-webkit-scrollbar { display: none !important; }
  .about-page .about-service-cards .image-card,
  .services-page .service-work-slide {
    flex: 0 0 min(86vw, 390px) !important;
    width: min(86vw, 390px) !important;
    height: 470px !important;
    min-height: 470px !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    border-radius: 30px !important;
    scroll-snap-align: start !important;
    transform: none !important;
  }
  .deck-progress {
    width: calc(100% - 32px) !important;
    height: 2px !important;
    margin: 8px 16px 0 !important;
    border-radius: 999px !important;
    background: rgba(239,233,220,.18) !important;
    overflow: hidden !important;
  }
  .deck-progress span {
    display: block !important;
    height: 100% !important;
    width: calc(var(--deck-progress, .18) * 100%) !important;
    border-radius: inherit !important;
    background: linear-gradient(90deg, var(--jic-muted-stone), var(--jic-soft-off-white)) !important;
    transition: width .12s linear !important;
  }
  .about-page .about-services-showcase .section-intro::after,
  .services-page .services-work-strip .section-intro::after {
    content: "" !important;
    display: inline-block !important;
    width: 46px !important;
    height: 1px !important;
    margin-left: 12px !important;
    vertical-align: middle !important;
    background: linear-gradient(90deg, currentColor, transparent) !important;
    opacity: .66 !important;
  }

  /* Services mobile: equal spacing before Residential and Commercial headings. */
  .services-page .services-work-strip,
  .services-page .services-work-strip + .services-work-strip {
    padding-top: 50px !important;
    margin-top: 0 !important;
  }

  /* Enquiries mobile: tighter after final route card. */
  .enquiries-page .contact-scroll-hero { padding-bottom: 16px !important; }
  .enquiries-page .contact-scroll-deck { margin-bottom: 0 !important; }
  .enquiries-page .contact-scroll-card:last-child { margin-bottom: 0 !important; }

  /* Mobile appointment popup: active card reveals description with a brief flip/lift as user scrolls. */
  .booking-overlay .overlay-booking-options {
    display: flex !important;
    overflow-x: auto !important;
    gap: 14px !important;
    scroll-snap-type: x mandatory !important;
    padding: 0 0 16px !important;
    perspective: 1000px !important;
  }
  .booking-overlay .overlay-booking-options a {
    position: relative !important;
    top: auto !important;
    flex: 0 0 82vw !important;
    min-height: 330px !important;
    border-radius: 30px !important;
    scroll-snap-align: center !important;
    transform-style: preserve-3d !important;
    transition: transform .36s cubic-bezier(.22,1,.36,1), box-shadow .36s ease !important;
  }
  .booking-overlay .overlay-booking-options a small {
    opacity: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transform: translateY(12px) !important;
    transition: opacity .24s ease, transform .24s ease, max-height .24s ease !important;
  }
  .booking-overlay .overlay-booking-options a.is-description-visible {
    transform: rotateY(6deg) translateY(-4px) !important;
  }
  .booking-overlay .overlay-booking-options a.is-description-visible small {
    opacity: .88 !important;
    max-height: 90px !important;
    transform: translateY(0) !important;
  }
}

/* V28 FINAL TURN-IN CORRECTIONS — do not remove. */
:root {
  --jic-flow-cream: #efe9dc;
  --jic-flow-cream-2: #e7dfd1;
  --jic-flow-sage: #7d8f6f;
  --jic-flow-ink: #121817;
}

/* Faster loader across every screen; logo first, copy fades in quickly. */
.preloader {
  transition: opacity .16s cubic-bezier(.22,1,.36,1), visibility .16s cubic-bezier(.22,1,.36,1) !important;
}
.preloader-brand,
.preloader-tagline {
  opacity: 0 !important;
  transform: translateY(8px) !important;
  transition: opacity .16s ease, transform .16s ease !important;
}
.preloader.stage-50 .preloader-brand,
.preloader.stage-90 .preloader-tagline {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.preloader-line,
.preloader-count { display: none !important; }

/* Seamless page flow: soften harsh transitions without changing content. */
main > section { scroll-margin-top: 110px; }
.home-page .about-overlap { padding-bottom: clamp(18px, 2.5vw, 42px) !important; }
.home-page .services-summary { padding-top: clamp(36px, 4.5vw, 66px) !important; }
.enquiry-cta-section { border-top: 0 !important; }

/* Desktop WhatsApp: restore v25 proportions, split card, and a visible single dash minimiser. */
@media (min-width: 981px) {
  .whatsapp-mini:not(.is-minimised) {
    left: 18px !important;
    right: auto !important;
    bottom: 18px !important;
    width: 206px !important;
    min-height: 86px !important;
    display: grid !important;
    grid-template-columns: 1fr 72px !important;
    align-items: stretch !important;
    gap: 5px !important;
    padding: 5px !important;
    border-radius: 12px !important;
    background: rgba(18,24,23,.12) !important;
    border: 1px solid rgba(239,233,220,.28) !important;
    backdrop-filter: blur(12px) !important;
    overflow: visible !important;
  }
  .whatsapp-mini:not(.is-minimised)::after { display: none !important; }
  .whatsapp-mini:not(.is-minimised) .wa-video-pane,
  .whatsapp-mini:not(.is-minimised) .wa-icon-pane {
    position: relative !important;
    z-index: 1 !important;
    min-height: 74px !important;
    border-radius: 9px !important;
    overflow: hidden !important;
  }
  .whatsapp-mini:not(.is-minimised) video {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 74px !important;
    object-fit: cover !important;
    border-radius: 9px !important;
    opacity: .92 !important;
  }
  .whatsapp-mini:not(.is-minimised) .wa-icon-pane {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(18,24,23,.18) !important;
    border: 1px solid rgba(239,233,220,.18) !important;
    color: #22c55e !important;
    cursor: pointer !important;
  }
  .whatsapp-mini:not(.is-minimised) .wa-icon-pane svg { width: 28px !important; height: 28px !important; }
  .whatsapp-mini:not(.is-minimised) .wa-mini-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: -26px !important;
    right: 8px !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 999px !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    padding: 0 !important;
    z-index: 10 !important;
    background: rgba(18,24,23,.48) !important;
    color: var(--jic-cream) !important;
    border: 1px solid rgba(239,233,220,.28) !important;
    cursor: pointer !important;
  }
  .whatsapp-mini:not(.is-minimised) .wa-mini-open { display: none !important; }
  .whatsapp-mini.is-minimised {
    left: 18px !important;
    bottom: 18px !important;
    width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
    border-radius: 999px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(18,24,23,.52) !important;
    border: 1px solid rgba(239,233,220,.25) !important;
    overflow: hidden !important;
  }
  .whatsapp-mini.is-minimised .wa-video-pane,
  .whatsapp-mini.is-minimised .wa-icon-pane,
  .whatsapp-mini.is-minimised .wa-mini-close,
  .whatsapp-mini.is-minimised video { display: none !important; }
  .whatsapp-mini.is-minimised .wa-mini-open {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--jic-cream) !important;
    font-weight: 800 !important;
    font-size: .74rem !important;
    letter-spacing: .04em !important;
    cursor: pointer !important;
  }
  .whatsapp-qr-panel {
    width: min(226px, calc(100vw - 32px)) !important;
    left: 18px !important;
    bottom: 116px !important;
    padding: 18px 16px 14px !important;
    border-radius: 0 !important;
  }
  .whatsapp-qr-close { right: 8px !important; top: 6px !important; font-size: 1.45rem !important; }
  .whatsapp-qr-panel img { width: 92px !important; height: 92px !important; margin: 2px auto 12px !important; }
  .whatsapp-qr-panel h3 { font-size: 1.22rem !important; letter-spacing: -.02em !important; margin-bottom: 7px !important; }
  .whatsapp-qr-panel p { font-size: .78rem !important; line-height: 1.35 !important; margin-bottom: 12px !important; }
  .whatsapp-qr-action { min-height: 42px !important; padding: 0 8px 0 10px !important; font-size: .66rem !important; letter-spacing: .02em !important; }
  .whatsapp-qr-action span:last-child { width: 32px !important; height: 30px !important; font-size: 1.1rem !important; }

  /* Desktop chatbot: shorter to avoid the floating nav/header. */
  .chatbot-panel {
    max-height: min(455px, calc(100vh - 194px)) !important;
    bottom: 82px !important;
  }
  .chatbot-body { max-height: calc(min(455px, calc(100vh - 194px)) - 104px) !important; }
}

/* Desktop About / Why Choose Us: Pieter-style sticky card motion, visible and offset, not static. */
@media (min-width: 981px) {
  .about-page .why-section.why-card-stack,
  .about-page .why-section.why-story-scroll {
    background: var(--jic-flow-cream) !important;
    color: var(--jic-flow-ink) !important;
    min-height: 330vh !important;
    overflow: clip !important;
    padding: 0 !important;
  }
  .about-page .why-card-stack > .container,
  .about-page .why-section.why-story-scroll > .container {
    position: sticky !important;
    top: 0 !important;
    height: 100svh !important;
    display: grid !important;
    grid-template-columns: minmax(420px, .95fr) minmax(560px, 1.05fr) !important;
    gap: clamp(44px, 5vw, 116px) !important;
    align-items: center !important;
    overflow: hidden !important;
    padding: clamp(96px, 11vh, 138px) clamp(24px, 3vw, 52px) clamp(58px, 7vh, 94px) !important;
  }
  .about-page .why-desktop-copy {
    max-width: 760px !important;
    width: 100% !important;
    align-self: center !important;
    text-align: left !important;
    z-index: 10 !important;
  }
  .about-page .why-desktop-copy .section-intro { max-width: 700px !important; }
  .about-page .why-card-stack .why-grid,
  .about-page .why-stack-track {
    position: relative !important;
    display: block !important;
    height: min(720px, 76svh) !important;
    width: 100% !important;
    overflow: visible !important;
    transform: none !important;
  }
  .about-page .why-card-stack .why-item {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: min(530px, 43vw) !important;
    min-height: 392px !important;
    border-radius: 20px !important;
    padding: 34px 32px !important;
    background: rgba(239,233,220,.78) !important;
    border: 1px solid rgba(18,24,23,.18) !important;
    box-shadow: 0 34px 95px rgba(18,24,23,.12) !important;
    opacity: 1 !important;
    visibility: visible !important;
    will-change: transform !important;
    transform-origin: center !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    transition: transform .06s linear, opacity .06s linear !important;
  }
  .about-page .why-card-stack .why-item:nth-child(1) { transform: translate3d(-72%, calc(-50% + 180px), 0) rotate(-7deg) !important; z-index: 21 !important; }
  .about-page .why-card-stack .why-item:nth-child(2) { transform: translate3d(-30%, calc(-50% + 86px), 0) rotate(1.6deg) !important; z-index: 22 !important; }
  .about-page .why-card-stack .why-item:nth-child(3) { transform: translate3d(6%, calc(-50% - 4px), 0) rotate(5.4deg) !important; z-index: 23 !important; }
}

/* Desktop Enquiries first block: cards visible, ordered and slower one-by-one scroll reveal. */
.enquiries-page .scroll-note { display: none !important; }
@media (min-width: 981px) {
  .enquiries-page .contact-hero.contact-scroll-hero {
    min-height: 430vh !important;
    overflow: clip !important;
  }
  .enquiries-page .contact-scroll-deck {
    display: block !important;
    position: relative !important;
    height: min(730px, 76svh) !important;
    grid-column: 2 !important;
    grid-row: 1 / span 3 !important;
    overflow: visible !important;
  }
  .enquiries-page .contact-scroll-card {
    position: absolute !important;
    width: min(470px, 38vw) !important;
    min-height: 300px !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    transition: transform .06s linear, opacity .06s linear !important;
  }
  .enquiries-page .contact-scroll-card.route-2 { left: 7% !important; top: 86px !important; transform: rotate(-2.4deg) scale(1) !important; z-index: 20 !important; }
  .enquiries-page .contact-scroll-card.route-3 { left: 42% !important; top: 720px !important; transform: rotate(1.4deg) scale(.96) !important; z-index: 21 !important; opacity: 0 !important; }
  .enquiries-page .contact-scroll-card.route-4 { left: 56% !important; top: 880px !important; transform: rotate(-1.8deg) scale(.96) !important; z-index: 22 !important; opacity: 0 !important; }
  .enquiries-page .contact-scroll-card.route-1 { left: 17% !important; top: 1040px !important; transform: rotate(1.1deg) scale(.96) !important; z-index: 23 !important; opacity: 0 !important; }
}

/* Mobile-level alignment and loader speed. */
@media (max-width: 980px) {
  .preloader { transition-duration: .14s !important; }
  .whatsapp-mini { left: 14px !important; bottom: 14px !important; }
  .chatbot-button { right: 14px !important; bottom: 14px !important; }
  .chatbot-panel {
    right: 12px !important;
    bottom: 82px !important;
    max-height: min(58vh, 440px) !important;
  }
  .chatbot-body { max-height: calc(min(58vh, 440px) - 104px) !important; }

  /* Home mobile About: simple overlap only; no vertical scroll. */
  .home-page .about-overlap {
    min-height: auto !important;
    padding: 42px 0 46px !important;
    overflow: visible !important;
  }
  .home-page .about-stage {
    display: block !important;
    position: relative !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
  }
  .home-page .about-image {
    position: relative !important;
    top: auto !important;
    height: 430px !important;
    min-height: 430px !important;
    width: 100% !important;
    border-radius: 30px !important;
  }
  .home-page .about-card {
    position: relative !important;
    top: auto !important;
    transform: none !important;
    width: calc(100% - 24px) !important;
    margin: -112px auto 0 !important;
    min-height: auto !important;
    padding: 30px 24px !important;
    background: rgba(239,233,220,.9) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255,255,255,.38) !important;
    border-radius: 30px !important;
    z-index: 2 !important;
  }

  /* About mobile intro: premium image-backed editorial block. */
  .about-page .about-cinematic {
    padding: 106px 0 42px !important;
    background: linear-gradient(180deg, rgba(18,24,23,.14), rgba(18,24,23,.04)), var(--jic-flow-cream) !important;
  }
  .about-page .about-cinematic .about-stage {
    display: block !important;
    min-height: 0 !important;
    position: relative !important;
  }
  .about-page .about-cinematic .about-image {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 34px !important;
    opacity: .34 !important;
    overflow: hidden !important;
    z-index: 0 !important;
  }
  .about-page .about-cinematic .about-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  .about-page .about-cinematic .about-card {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    min-height: auto !important;
    padding: 36px 24px 52px !important;
    color: var(--jic-cream) !important;
    background: linear-gradient(135deg, rgba(18,24,23,.94), rgba(18,24,23,.82)) !important;
    border-radius: 34px !important;
    overflow: hidden !important;
    box-shadow: 0 28px 80px rgba(18,24,23,.2) !important;
  }
  .about-page .about-cinematic .about-card p { padding-bottom: 10px !important; color: rgba(239,233,220,.82) !important; }

  /* About mobile Why Choose Us: visible vertical sticky cards, original light colour, Ashley-style stacking. */
  .about-page .why-section.why-card-stack {
    background: var(--jic-flow-cream) !important;
    color: var(--jic-flow-ink) !important;
    padding: 56px 0 48px !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
  }
  .about-page .why-card-stack > .container {
    position: static !important;
    display: block !important;
    height: auto !important;
    padding-block: 0 !important;
    overflow: visible !important;
  }
  .about-page .why-desktop-copy { text-align: left !important; margin: 0 0 26px !important; max-width: none !important; }
  .about-page .why-desktop-copy h2 { font-size: clamp(3rem, 15vw, 5.2rem) !important; line-height: .92 !important; }
  .about-page .why-desktop-copy .section-intro { text-align: left !important; margin: 16px 0 0 !important; max-width: none !important; }
  .about-page .why-stack-track,
  .about-page .why-card-stack .why-grid {
    display: block !important;
    height: auto !important;
    width: 100% !important;
    overflow: visible !important;
  }
  .about-page .why-card-stack .why-item {
    position: sticky !important;
    top: 92px !important;
    left: auto !important;
    width: 100% !important;
    min-height: 380px !important;
    margin: 0 0 18px !important;
    padding: 30px 24px !important;
    border-radius: 30px !important;
    background: rgba(255,255,255,.62) !important;
    border: 1px solid rgba(18,24,23,.14) !important;
    box-shadow: 0 20px 55px rgba(18,24,23,.08) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
  }
  .about-page .why-card-stack .why-item:nth-child(2) { top: 108px !important; z-index: 2 !important; }
  .about-page .why-card-stack .why-item:nth-child(3) { top: 124px !important; z-index: 3 !important; }

  /* Mobile horizontal sections: integrated cards, no top arrow/circle, animated progress below only. */
  .about-page .about-services-showcase,
  .services-page .services-work-strip {
    padding: 48px 0 38px !important;
    overflow: hidden !important;
  }
  .about-page .about-services-showcase .container,
  .services-page .services-work-strip .container,
  .about-page .about-services-showcase .work-track-shell,
  .services-page .services-work-strip .work-track-shell,
  .services-page .services-work-strip .service-track-shell {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .about-page .about-services-showcase .work-scroll-head,
  .services-page .services-work-strip .work-scroll-head {
    width: 100% !important;
    max-width: none !important;
    padding: 0 16px !important;
    margin-bottom: 16px !important;
  }
  .about-page .about-services-showcase .work-scroll-head .section-header::after,
  .about-page .about-services-showcase .section-intro::after,
  .services-page .services-work-strip .section-header::before,
  .services-page .services-work-strip .section-header::after,
  .services-page .services-work-strip .section-intro::after,
  .services-page .service-work-slide::after,
  .services-page .service-work-slide .image-card-content::after {
    content: none !important;
    display: none !important;
  }
  .about-page .about-service-cards,
  .services-page .service-horizontal-track.service-work-cards {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 16px 16px !important;
    transform: none !important;
  }
  .about-page .about-service-cards::-webkit-scrollbar,
  .services-page .service-horizontal-track.service-work-cards::-webkit-scrollbar { display: none !important; }
  .about-page .about-service-cards .image-card,
  .services-page .service-work-slide {
    flex: 0 0 min(86vw, 390px) !important;
    width: min(86vw, 390px) !important;
    height: 468px !important;
    min-height: 468px !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    border-radius: 30px !important;
    scroll-snap-align: start !important;
    transform: none !important;
  }
  .deck-progress {
    position: relative !important;
    width: calc(100% - 32px) !important;
    height: 3px !important;
    margin: 8px 16px 0 !important;
    border-radius: 999px !important;
    background: rgba(18,24,23,.15) !important;
    overflow: visible !important;
  }
  .deck-progress span {
    display: block !important;
    height: 100% !important;
    width: calc(var(--deck-progress, .18) * 100%) !important;
    min-width: 18% !important;
    border-radius: inherit !important;
    background: linear-gradient(90deg, var(--jic-flow-sage), var(--jic-flow-cream)) !important;
    box-shadow: 0 0 18px rgba(125,143,111,.48) !important;
    transition: width .12s linear !important;
  }
  .deck-progress::after {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    width: 34px !important;
    height: 16px !important;
    transform: translateY(-50%) !important;
    border-radius: 999px !important;
    background: radial-gradient(circle at 74% 50%, rgba(239,233,220,.95) 0 4px, transparent 5px), linear-gradient(90deg, transparent, rgba(125,143,111,.42)) !important;
    animation: jicSwipePulse 1.35s ease-in-out infinite !important;
  }
  @keyframes jicSwipePulse {
    0%,100% { transform: translate(-5px,-50%); opacity: .48; }
    50% { transform: translate(3px,-50%); opacity: 1; }
  }

  /* Mobile Services: differentiated but seamless Residential/Commercial sections and tighter heading gap. */
  .services-page .services-work-strip:nth-of-type(odd) { background: linear-gradient(180deg, rgba(239,233,220,.98), rgba(239,233,220,.92)) !important; }
  .services-page .services-work-strip:nth-of-type(even) { background: linear-gradient(180deg, rgba(231,223,209,.72), rgba(239,233,220,.96)) !important; }
  .services-page .services-work-strip,
  .services-page .services-work-strip + .services-work-strip {
    padding-top: 42px !important;
    margin-top: 0 !important;
  }
  .services-page .services-work-strip + .services-work-strip { padding-top: 30px !important; }

  /* Mobile Enquiries: tighter hero/cards, better CTA, and correct booking button order. */
  .enquiries-page .contact-scroll-hero {
    padding: 106px 0 10px !important;
    min-height: auto !important;
    overflow: visible !important;
  }
  .enquiries-page .contact-scroll-deck {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    height: auto !important;
    margin-top: 34px !important;
    margin-bottom: 0 !important;
  }
  .enquiries-page .contact-scroll-card {
    width: 100% !important;
    min-height: 262px !important;
    margin-bottom: 16px !important;
    padding: 28px 24px !important;
    border-radius: 30px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .enquiries-page .contact-scroll-card:last-child { margin-bottom: 0 !important; }
  .enquiries-page .contact-scroll-card.route-2 { order: 1 !important; }
  .enquiries-page .contact-scroll-card.route-3 { order: 2 !important; }
  .enquiries-page .contact-scroll-card.route-4 { order: 3 !important; }
  .enquiries-page .contact-scroll-card.route-1 { order: 4 !important; }
  .enquiries-page .contact-scroll-card .route-cta {
    align-self: flex-start !important;
    width: auto !important;
    min-height: 46px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    background: var(--jic-flow-ink) !important;
    color: var(--jic-flow-cream) !important;
  }
  .booking-section {
    background: linear-gradient(180deg, var(--jic-flow-cream), var(--jic-flow-cream-2)) !important;
    padding-top: 48px !important;
    padding-bottom: 42px !important;
  }
  .booking-section .services-pin-left .booking-mobile-launch { order: 1 !important; margin-top: 20px !important; }
  .booking-section .services-pin-left > a[href="#quote-form"] { order: 2 !important; margin-top: 12px !important; }
  .booking-section .services-pin-left { display: flex !important; flex-direction: column !important; }
  .booking-mobile-launch,
  .booking-section .services-pin-left > a[href="#quote-form"] {
    width: fit-content !important;
    min-height: 48px !important;
    padding: 0 20px !important;
    border-radius: 999px !important;
  }
  .contact-form-section {
    background: linear-gradient(180deg, var(--jic-flow-cream-2), var(--jic-flow-cream)) !important;
    padding-top: 48px !important;
  }
  .contact-form-section .form-grid { display: flex !important; flex-direction: column !important; gap: 24px !important; }
  .contact-form-section .form-panel { order: 1 !important; }
  .contact-form-section .contact-details { order: 2 !important; }
  .contact-form-section .form-actions { margin-top: 12px !important; }
  .contact-form-section .btn[data-progress-button] { margin-top: 4px !important; }
  .social-line { gap: 8px !important; }

  /* Mobile appointment overlay: horizontal card rail with animated cue and active-card description. */
  .booking-overlay .overlay-booking-options {
    position: relative !important;
    display: flex !important;
    overflow-x: auto !important;
    gap: 14px !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 0 18px !important;
    perspective: 1000px !important;
  }
  .booking-overlay .overlay-booking-options::-webkit-scrollbar { display: none !important; }
  .booking-overlay .overlay-booking-options::after {
    content: "" !important;
    position: absolute !important;
    right: 10px !important;
    bottom: 3px !important;
    width: 52px !important;
    height: 18px !important;
    border-radius: 999px !important;
    background: radial-gradient(circle at 78% 50%, rgba(239,233,220,.96) 0 4px, transparent 5px), linear-gradient(90deg, transparent, rgba(125,143,111,.5)) !important;
    animation: jicSwipePulse 1.35s ease-in-out infinite !important;
    pointer-events: none !important;
  }
  .booking-overlay .overlay-booking-options a {
    flex: 0 0 82vw !important;
    width: 82vw !important;
    min-height: 338px !important;
    border-radius: 30px !important;
    scroll-snap-align: center !important;
    transform-style: preserve-3d !important;
    transition: transform .36s cubic-bezier(.22,1,.36,1), box-shadow .36s ease, background .36s ease !important;
  }
  .booking-overlay .overlay-booking-options a small {
    opacity: .56 !important;
    max-height: 34px !important;
    overflow: hidden !important;
    transform: translateY(0) !important;
    transition: opacity .24s ease, transform .24s ease, max-height .24s ease !important;
  }
  .booking-overlay .overlay-booking-options a.is-description-visible {
    transform: rotateY(5deg) translateY(-4px) scale(1.02) !important;
    box-shadow: 0 30px 85px rgba(0,0,0,.24) !important;
    background: var(--jic-flow-cream) !important;
  }
  .booking-overlay .overlay-booking-options a.is-description-visible small {
    opacity: .9 !important;
    max-height: 96px !important;
    transform: translateY(0) !important;
  }
}



/* V29 FINAL LOCK — targeted corrections only. */

/* Loader: version-23 pace, visible fade-in copy, quicker transition. */
.preloader {
  transition: opacity .18s cubic-bezier(.22,1,.36,1), visibility .18s cubic-bezier(.22,1,.36,1) !important;
}
.preloader-logo {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
.preloader-brand,
.preloader-tagline {
  opacity: 0 !important;
  transform: translateY(10px) !important;
  transition: opacity .22s cubic-bezier(.22,1,.36,1), transform .22s cubic-bezier(.22,1,.36,1) !important;
}
.preloader.stage-50 .preloader-brand,
.preloader.stage-90 .preloader-tagline {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.preloader-brand .loader-letter {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
.preloader-line {
  display: block !important;
  height: 2px !important;
  width: min(320px, 70vw) !important;
  margin: 26px auto 0 !important;
  background: rgba(239,233,220,.22) !important;
}
.preloader-line span {
  display: block !important;
  height: 100% !important;
  width: 0%;
  background: linear-gradient(90deg, var(--jic-cream), var(--jic-sage)) !important;
  transition: width .08s linear !important;
}
.preloader-count { display: none !important; }

/* Desktop: home page service block tighter at top only. */
@media (min-width: 981px) {
  .home-page .services-summary {
    padding-top: clamp(24px, 3vw, 44px) !important;
  }
}

/* Desktop WhatsApp: exact v25 compact two-panel size, one top dash only. */
@media (min-width: 981px) {
  .whatsapp-mini:not(.is-minimised) {
    left: 18px !important;
    right: auto !important;
    bottom: 18px !important;
    width: 206px !important;
    height: 86px !important;
    min-height: 86px !important;
    max-height: 86px !important;
    display: grid !important;
    grid-template-columns: 1fr 72px !important;
    align-items: stretch !important;
    gap: 5px !important;
    padding: 5px !important;
    border-radius: 12px !important;
    overflow: visible !important;
    background: rgba(18,24,23,.12) !important;
    border: 1px solid rgba(239,233,220,.28) !important;
    backdrop-filter: blur(12px) !important;
    box-shadow: 0 12px 36px rgba(18,24,23,.22) !important;
  }
  .whatsapp-mini:not(.is-minimised) .wa-video-pane,
  .whatsapp-mini:not(.is-minimised) .wa-icon-pane {
    min-height: 74px !important;
    height: 74px !important;
    border-radius: 9px !important;
    overflow: hidden !important;
  }
  .whatsapp-mini:not(.is-minimised) .wa-video-pane video,
  .whatsapp-mini:not(.is-minimised) video {
    width: 100% !important;
    height: 74px !important;
    min-height: 74px !important;
    object-fit: cover !important;
    border-radius: 9px !important;
    opacity: .92 !important;
  }
  .whatsapp-mini:not(.is-minimised) .wa-icon-pane {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(18,24,23,.18) !important;
    border: 1px solid rgba(239,233,220,.18) !important;
    color: #22c55e !important;
  }
  .whatsapp-mini:not(.is-minimised) .wa-icon-pane svg {
    width: 28px !important;
    height: 28px !important;
  }
  .whatsapp-mini:not(.is-minimised) .wa-mini-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: -25px !important;
    right: 8px !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    border-radius: 999px !important;
    padding: 0 !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    background: rgba(18,24,23,.48) !important;
    color: var(--jic-cream) !important;
    border: 1px solid rgba(239,233,220,.28) !important;
    z-index: 20 !important;
  }
  .whatsapp-mini:not(.is-minimised) .wa-mini-open { display: none !important; }
}

/* Desktop About: PieterKoopt-style sticky copy + moving card deck.
   JS writes important transforms; these defaults prevent a flat static pile before scroll starts. */
@media (min-width: 981px) {
  .about-page .why-section.why-card-stack,
  .about-page .why-section.why-story-scroll {
    min-height: 390vh !important;
    background: var(--jic-cream) !important;
    color: var(--jic-ink) !important;
    padding: 0 !important;
    overflow: clip !important;
  }
  .about-page .why-card-stack > .container,
  .about-page .why-section.why-story-scroll > .container {
    position: sticky !important;
    top: 0 !important;
    height: 100svh !important;
    display: grid !important;
    grid-template-columns: minmax(430px, .92fr) minmax(580px, 1.08fr) !important;
    gap: clamp(56px, 6vw, 120px) !important;
    align-items: center !important;
    padding: clamp(86px, 10vh, 132px) clamp(26px, 3vw, 52px) clamp(58px, 7vh, 94px) !important;
    overflow: hidden !important;
  }
  .about-page .why-desktop-copy {
    max-width: 760px !important;
    width: 100% !important;
    text-align: left !important;
    z-index: 30 !important;
  }
  .about-page .why-card-stack .why-grid,
  .about-page .why-stack-track {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: min(720px, 76svh) !important;
    overflow: visible !important;
    transform: none !important;
  }
  body.about-page .why-card-stack .why-item {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: min(535px, 43vw) !important;
    min-height: 398px !important;
    border-radius: 20px !important;
    padding: 36px 34px !important;
    background: rgba(239,233,220,.72) !important;
    border: 1px solid rgba(18,24,23,.18) !important;
    color: var(--jic-ink) !important;
    box-shadow: 0 34px 95px rgba(18,24,23,.12) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    opacity: 1 !important;
    visibility: visible !important;
    will-change: transform, opacity !important;
    transform-origin: center center !important;
    transition: none !important;
  }
  body.about-page .why-card-stack .why-item:nth-child(1) {
    transform: translate3d(-82%, calc(-50% + 210px), 0) rotate(-7deg) !important;
    z-index: 21 !important;
  }
  body.about-page .why-card-stack .why-item:nth-child(2) {
    transform: translate3d(-26%, calc(-50% + 90px), 0) rotate(1.7deg) !important;
    z-index: 22 !important;
  }
  body.about-page .why-card-stack .why-item:nth-child(3) {
    transform: translate3d(16%, calc(-50% - 24px), 0) rotate(5.3deg) !important;
    z-index: 23 !important;
  }
}

/* Desktop Enquiries: restore all route cards and make them reveal slowly one by one. */
.enquiries-page .scroll-note { display: none !important; }
@media (min-width: 981px) {
  .enquiries-page .contact-hero.contact-scroll-hero {
    min-height: 470vh !important;
    display: block !important;
    overflow: clip !important;
  }
  .enquiries-page .contact-scroll-hero .hero-content {
    position: sticky !important;
    top: 0 !important;
    height: 100svh !important;
    width: min(1240px, calc(100% - 56px)) !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(380px, .84fr) minmax(540px, 1.16fr) !important;
    grid-template-rows: auto auto 1fr !important;
    column-gap: clamp(50px, 6vw, 124px) !important;
    align-items: center !important;
    padding-top: clamp(82px, 12vh, 130px) !important;
  }
  .enquiries-page .contact-scroll-hero h1,
  .enquiries-page .contact-scroll-hero .hero-content > p {
    grid-column: 1 !important;
    text-align: left !important;
  }
  .enquiries-page .contact-scroll-deck {
    grid-column: 2 !important;
    grid-row: 1 / span 3 !important;
    position: relative !important;
    display: block !important;
    height: min(760px, 78svh) !important;
    overflow: visible !important;
  }
  body.enquiries-page .contact-scroll-card {
    position: absolute !important;
    width: min(470px, 38vw) !important;
    min-height: 300px !important;
    border-radius: 28px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    will-change: transform, opacity, top !important;
    transition: none !important;
  }
  body.enquiries-page .contact-scroll-card.route-2 { left: 7% !important; top: 90px !important; transform: rotate(-2.4deg) scale(1) !important; z-index: 30 !important; opacity: 1 !important; }
  body.enquiries-page .contact-scroll-card.route-3 { left: 42% !important; top: 820px !important; transform: rotate(1.4deg) scale(.96) !important; z-index: 31 !important; opacity: 0 !important; }
  body.enquiries-page .contact-scroll-card.route-4 { left: 56% !important; top: 980px !important; transform: rotate(-1.8deg) scale(.96) !important; z-index: 32 !important; opacity: 0 !important; }
  body.enquiries-page .contact-scroll-card.route-1 { left: 17% !important; top: 1160px !important; transform: rotate(1.1deg) scale(.96) !important; z-index: 33 !important; opacity: 0 !important; }
}


/* V30 FINAL LOCK — no regressions: faster loader, correct WhatsApp, visible chatbot, sequential desktop decks. */

/* Loader: logo first, then name/subtext fade in quickly at v23-style pace. */
.preloader {
  transition: opacity .16s cubic-bezier(.22,1,.36,1), visibility .16s cubic-bezier(.22,1,.36,1) !important;
}
.preloader-logo {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
.preloader-brand,
.preloader-tagline {
  opacity: 0 !important;
  transform: translateY(10px) !important;
  transition: opacity .20s cubic-bezier(.22,1,.36,1), transform .20s cubic-bezier(.22,1,.36,1) !important;
}
.preloader.stage-50 .preloader-brand,
.preloader.stage-90 .preloader-tagline {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.preloader .loader-letter {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
.preloader-line { opacity: .72 !important; }

/* Restore/lock chatbot visibility on the right. */
.chatbot-button {
  display: flex !important;
  position: fixed !important;
  right: 24px !important;
  left: auto !important;
  bottom: 24px !important;
  z-index: 9000 !important;
  background: var(--jic-deep-charcoal, #121817) !important;
  color: var(--jic-off-white, #f4efe6) !important;
}
.chatbot-panel {
  position: fixed !important;
  right: 24px !important;
  left: auto !important;
  bottom: 96px !important;
  z-index: 9000 !important;
  max-height: min(520px, calc(100vh - 150px)) !important;
}
.chatbot-body {
  max-height: calc(min(520px, calc(100vh - 150px)) - 92px) !important;
  overflow: auto !important;
}

/* Desktop WhatsApp: back to compact v25 dimensions, with a single minimiser at the top. */
@media (min-width: 981px) {
  .whatsapp-mini {
    left: 22px !important;
    right: auto !important;
    bottom: 22px !important;
    width: 184px !important;
    height: 86px !important;
    min-width: 184px !important;
    min-height: 86px !important;
    max-width: 184px !important;
    max-height: 86px !important;
    display: grid !important;
    grid-template-columns: 1fr 58px !important;
    gap: 6px !important;
    padding: 6px !important;
    border-radius: 18px !important;
    overflow: visible !important;
    background: rgba(18,24,23,.12) !important;
    border: 1px solid rgba(239,233,220,.28) !important;
    box-shadow: 0 22px 60px rgba(0,0,0,.22) !important;
    backdrop-filter: blur(12px) !important;
    transition: width .24s ease, height .24s ease, border-radius .24s ease !important;
  }
  .whatsapp-mini::after { display: none !important; }
  .whatsapp-mini .wa-video-pane,
  .whatsapp-mini .wa-icon-pane {
    position: relative !important;
    z-index: 1 !important;
    min-height: 72px !important;
    height: 72px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }
  .whatsapp-mini .wa-video-pane {
    background: rgba(156,171,136,.14) !important;
    border: 1px solid rgba(239,233,220,.18) !important;
  }
  .whatsapp-mini video {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 72px !important;
    object-fit: cover !important;
    opacity: .92 !important;
    filter: saturate(.88) contrast(1.02) !important;
  }
  .whatsapp-mini .wa-icon-pane {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(18,24,23,.2) !important;
    border: 1px solid rgba(239,233,220,.18) !important;
    color: #21d162 !important;
    cursor: pointer !important;
  }
  .whatsapp-mini .wa-icon-pane svg {
    width: 32px !important;
    height: 32px !important;
  }
  .whatsapp-mini .wa-mini-body { display: none !important; }
  .whatsapp-mini .wa-mini-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: -13px !important;
    right: 12px !important;
    z-index: 8 !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(239,233,220,.28) !important;
    background: rgba(18,24,23,.74) !important;
    color: var(--jic-cream, #efe9dc) !important;
    font-size: 1.15rem !important;
    line-height: 1 !important;
    padding: 0 !important;
    cursor: pointer !important;
  }
  .whatsapp-mini:not(.is-minimised) .wa-mini-open { display: none !important; }
  .whatsapp-mini.is-minimised {
    display: block !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    max-width: 58px !important;
    max-height: 58px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    background: rgba(18,24,23,.62) !important;
  }
  .whatsapp-mini.is-minimised .wa-video-pane,
  .whatsapp-mini.is-minimised .wa-icon-pane,
  .whatsapp-mini.is-minimised .wa-mini-close {
    display: none !important;
  }
  .whatsapp-mini.is-minimised .wa-mini-open {
    display: inline-flex !important;
    width: 100% !important;
    height: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--jic-cream, #efe9dc) !important;
    font-weight: 900 !important;
    cursor: pointer !important;
  }
  .whatsapp-qr-panel {
    left: 22px !important;
    bottom: 116px !important;
    width: 210px !important;
    padding: 14px 14px 12px !important;
    border-radius: 14px !important;
    background: #efebe4 !important;
    color: var(--jic-ink, #121817) !important;
  }
  .whatsapp-qr-panel img {
    width: 86px !important;
    height: 86px !important;
    margin: 0 auto 8px !important;
  }
  .whatsapp-qr-panel h3 {
    font-size: 1.18rem !important;
    margin: 0 0 6px !important;
    text-align: center !important;
  }
  .whatsapp-qr-panel p {
    font-size: .76rem !important;
    line-height: 1.35 !important;
    margin: 0 0 10px !important;
    text-align: center !important;
  }
  .whatsapp-qr-action {
    min-height: 38px !important;
    padding: 0 8px 0 10px !important;
    font-size: .62rem !important;
  }
  .whatsapp-qr-action span:last-child {
    width: 32px !important;
    height: 30px !important;
    font-size: 1.2rem !important;
  }
  .whatsapp-qr-close {
    top: 5px !important;
    right: 7px !important;
    font-size: 1.25rem !important;
  }
}

/* Desktop About: larger text area, smaller opaque cards, card-by-card scroll join. */
@media (min-width: 981px) {
  .about-page .why-section.why-card-stack {
    min-height: 350vh !important;
    background: var(--jic-cream, #efe9dc) !important;
    color: var(--jic-ink, #121817) !important;
    overflow: clip !important;
    padding: 0 !important;
  }
  .about-page .why-card-stack > .container {
    position: sticky !important;
    top: 0 !important;
    height: 100svh !important;
    display: grid !important;
    grid-template-columns: minmax(440px, 1.08fr) minmax(430px, .92fr) !important;
    align-items: center !important;
    gap: clamp(44px, 5vw, 86px) !important;
    padding-block: clamp(96px, 10vh, 136px) clamp(52px, 7vh, 84px) !important;
    overflow: hidden !important;
  }
  .about-page .why-desktop-copy {
    max-width: 780px !important;
    width: 100% !important;
    text-align: left !important;
    margin: 0 !important;
    align-self: center !important;
  }
  .about-page .why-desktop-copy .section-title,
  .about-page .why-desktop-copy h2 {
    max-width: 780px !important;
  }
  .about-page .why-desktop-copy .section-intro {
    max-width: 720px !important;
    text-align: left !important;
  }
  .about-page .why-stack-track {
    position: relative !important;
    height: min(660px, 74svh) !important;
    width: 100% !important;
    display: block !important;
    overflow: visible !important;
  }
  .about-page .why-card-stack .why-item {
    position: absolute !important;
    top: 50% !important;
    left: 52% !important;
    width: min(390px, 32vw) !important;
    min-height: 320px !important;
    border-radius: 20px !important;
    padding: 28px 26px !important;
    background: rgba(246,242,232,.98) !important;
    color: var(--jic-ink, #121817) !important;
    border: 1px solid rgba(18,24,23,.13) !important;
    box-shadow: 0 28px 70px rgba(18,24,23,.16) !important;
    opacity: 0 !important;
    visibility: visible !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    transform-origin: center !important;
    transition: none !important;
  }
  .about-page .why-card-stack .why-item svg {
    width: 76px !important;
    height: 76px !important;
    margin: 0 0 auto !important;
  }
  .about-page .why-card-stack .why-item h3 {
    font-size: clamp(1.28rem, 1.8vw, 1.86rem) !important;
    line-height: 1.04 !important;
  }
  .about-page .why-card-stack .why-item p {
    color: rgba(18,24,23,.72) !important;
    font-size: .94rem !important;
    line-height: 1.55 !important;
  }
}

/* Desktop Enquiries: text first, then slow one-by-one contact-card reveal. */
@media (min-width: 981px) {
  .enquiries-page .contact-hero.contact-scroll-hero {
    min-height: 395vh !important;
    background: var(--jic-ink, #121817) !important;
    color: var(--jic-cream, #efe9dc) !important;
    overflow: clip !important;
  }
  .enquiries-page .contact-scroll-hero .hero-content {
    position: sticky !important;
    top: 0 !important;
    height: 100svh !important;
    width: min(1240px, calc(100% - 56px)) !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(390px, .82fr) minmax(540px, 1.18fr) !important;
    align-items: center !important;
    gap: clamp(42px, 5vw, 94px) !important;
    padding: clamp(72px, 8vh, 104px) 0 clamp(38px, 5vh, 62px) !important;
    text-align: left !important;
  }
  .enquiries-page .contact-scroll-hero h1 {
    grid-column: 1 !important;
    align-self: center !important;
    margin: 0 !important;
    color: var(--jic-soft-off-white, #f7f3ea) !important;
  }
  .enquiries-page .contact-scroll-hero .hero-content > p {
    grid-column: 1 !important;
    align-self: start !important;
    margin: -8vh 0 0 !important;
    max-width: 560px !important;
    color: rgba(247,243,234,.76) !important;
  }
  .enquiries-page .contact-scroll-deck {
    grid-column: 2 !important;
    grid-row: 1 / span 3 !important;
    position: relative !important;
    height: min(720px, 75svh) !important;
    display: block !important;
    margin: 0 !important;
  }
  .enquiries-page .contact-scroll-card {
    position: absolute !important;
    width: min(420px, 34vw) !important;
    min-height: 280px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 28px !important;
    border-radius: 24px !important;
    background: rgba(239,233,220,.96) !important;
    color: var(--jic-ink, #121817) !important;
    box-shadow: 0 34px 100px rgba(0,0,0,.32) !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    opacity: 0 !important;
    visibility: visible !important;
    transition: none !important;
  }
  .enquiries-page .contact-scroll-card strong {
    font-size: clamp(1.35rem, 2vw, 2.25rem) !important;
    line-height: .98 !important;
  }
  .enquiries-page .scroll-note { display: none !important; }
}

@media (max-width: 980px) {
  .whatsapp-mini { bottom: 18px !important; left: 14px !important; }
  .chatbot-button { bottom: 18px !important; right: 14px !important; }
}


/* V31 FINAL CLIENT-LOCKED CORRECTIONS — only requested items. */

/* Loader: immediate copy fade, v23-style pace, fully responsive. */
.preloader {
  transition: opacity .18s cubic-bezier(.22,1,.36,1), visibility .18s cubic-bezier(.22,1,.36,1) !important;
}
.preloader-inner {
  width: min(640px, calc(100% - 48px)) !important;
}
.preloader-logo {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
.preloader-brand,
.preloader-tagline {
  opacity: 0 !important;
  transform: translateY(12px) !important;
  transition: opacity .24s cubic-bezier(.22,1,.36,1), transform .24s cubic-bezier(.22,1,.36,1) !important;
}
.preloader.stage-50 .preloader-brand,
.preloader.stage-90 .preloader-tagline {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.preloader-brand .loader-letter,
.preloader-tagline .loader-letter {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
@media (max-width: 980px) {
  .preloader-inner { width: min(360px, calc(100% - 36px)) !important; }
  .preloader-logo { width: clamp(92px, 30vw, 142px) !important; height: clamp(92px, 30vw, 142px) !important; margin-bottom: 22px !important; }
  .preloader-brand { font-size: clamp(2rem, 12vw, 3.35rem) !important; line-height: .92 !important; }
  .preloader-tagline { font-size: clamp(.95rem, 5vw, 1.28rem) !important; line-height: 1.05 !important; }
}

/* Desktop WhatsApp: v25 dimensions and panels, restored muted-stone CTA colour, one minimiser, QR popup retained. */
@media (min-width: 981px) {
  .whatsapp-mini:not(.is-minimised) {
    left: 18px !important;
    right: auto !important;
    bottom: 18px !important;
    width: 206px !important;
    height: auto !important;
    min-width: 206px !important;
    max-width: 206px !important;
    min-height: 86px !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: 1fr 72px !important;
    gap: 5px !important;
    padding: 5px !important;
    border-radius: 12px !important;
    overflow: visible !important;
    background: var(--cta-bg, var(--brand-stone, #A8B395)) !important;
    border: 1px solid rgba(18,24,23,.14) !important;
    box-shadow: 0 24px 64px rgba(18,24,23,.26) !important;
    backdrop-filter: blur(12px) !important;
  }
  .whatsapp-mini:not(.is-minimised)::after,
  .whatsapp-mini:not(.is-minimised) .wa-mini-body { display: none !important; }
  .whatsapp-mini .wa-video-pane,
  .whatsapp-mini .wa-icon-pane {
    min-height: 74px !important;
    height: 74px !important;
    border-radius: 9px !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 1 !important;
  }
  .whatsapp-mini .wa-video-pane {
    background: rgba(18,24,23,.16) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
  }
  .whatsapp-mini .wa-video-pane video,
  .whatsapp-mini video {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 74px !important;
    object-fit: cover !important;
    opacity: .92 !important;
    border-radius: 9px !important;
  }
  .whatsapp-mini .wa-icon-pane {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--brand-ink, #101412) !important;
    background: rgba(255,255,255,.28) !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    cursor: pointer !important;
  }
  .whatsapp-mini .wa-icon-pane svg { width: 28px !important; height: 28px !important; }
  .whatsapp-mini .wa-mini-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: -26px !important;
    right: 8px !important;
    z-index: 10 !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(239,233,220,.28) !important;
    background: rgba(18,24,23,.78) !important;
    color: var(--jic-cream, #efe9dc) !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    padding: 0 !important;
    cursor: pointer !important;
  }
  .whatsapp-mini:not(.is-minimised) .wa-mini-open { display: none !important; }
  .whatsapp-mini.is-minimised {
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    min-height: 62px !important;
    max-width: 62px !important;
    max-height: 62px !important;
    border-radius: 999px !important;
    padding: 0 !important;
    display: block !important;
    overflow: hidden !important;
    background: var(--cta-bg, var(--brand-stone, #A8B395)) !important;
  }
  .whatsapp-mini.is-minimised .wa-video-pane,
  .whatsapp-mini.is-minimised .wa-icon-pane,
  .whatsapp-mini.is-minimised .wa-mini-close,
  .whatsapp-mini.is-minimised video,
  .whatsapp-mini.is-minimised .wa-mini-body { display: none !important; }
  .whatsapp-mini.is-minimised .wa-mini-open {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 62px !important;
    height: 62px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--brand-ink, #101412) !important;
    font-weight: 900 !important;
    cursor: pointer !important;
  }
  .whatsapp-qr-panel {
    width: min(226px, calc(100vw - 32px)) !important;
    left: 18px !important;
    bottom: 116px !important;
    padding: 18px 16px 14px !important;
    border-radius: 0 !important;
    z-index: 9200 !important;
  }
  .whatsapp-qr-panel.open { display: block !important; }
  .whatsapp-qr-close { right: 8px !important; top: 6px !important; font-size: 1.45rem !important; }
  .whatsapp-qr-panel img { width: 92px !important; height: 92px !important; margin: 2px auto 12px !important; }
  .whatsapp-qr-panel h3 { font-size: 1.22rem !important; letter-spacing: -.02em !important; margin-bottom: 7px !important; }
  .whatsapp-qr-panel p { font-size: .78rem !important; line-height: 1.35 !important; margin-bottom: 12px !important; }
  .whatsapp-qr-action { min-height: 42px !important; padding: 0 8px 0 10px !important; font-size: .66rem !important; letter-spacing: .02em !important; }
  .whatsapp-qr-action span:last-child { width: 32px !important; height: 30px !important; font-size: 1.1rem !important; }
}

/* Chatbot: only reduce panel height enough to avoid menu/header clipping. */
@media (min-width: 981px) {
  .chatbot-panel {
    bottom: 82px !important;
    max-height: min(500px, calc(100vh - 178px)) !important;
  }
  .chatbot-body { max-height: calc(min(500px, calc(100vh - 178px)) - 104px) !important; }
}

/* Desktop About: larger text area, smaller fully-opaque cards; no pre-visible first card before scroll sequence. */
@media (min-width: 981px) {
  .about-page .why-section.why-card-stack {
    min-height: 370vh !important;
    background: var(--jic-cream, #efe9dc) !important;
    color: var(--jic-ink, #121817) !important;
    overflow: clip !important;
  }
  .about-page .why-card-stack > .container {
    grid-template-columns: minmax(520px, 1.14fr) minmax(380px, .86fr) !important;
    gap: clamp(40px, 4vw, 78px) !important;
  }
  .about-page .why-desktop-copy {
    width: 100% !important;
    max-width: 820px !important;
  }
  .about-page .why-desktop-copy .section-intro {
    max-width: 760px !important;
  }
  .about-page .why-stack-track {
    height: min(640px, 72svh) !important;
    width: 100% !important;
  }
  .about-page .why-card-stack .why-item {
    width: min(360px, 30vw) !important;
    min-height: 305px !important;
    padding: 26px 24px !important;
    border-radius: 18px !important;
    background: rgba(246,242,232,.985) !important;
    color: var(--jic-ink, #121817) !important;
    border: 1px solid rgba(18,24,23,.14) !important;
    box-shadow: 0 26px 72px rgba(18,24,23,.16) !important;
    opacity: 0 !important;
    visibility: visible !important;
    overflow: hidden !important;
  }
  .about-page .why-card-stack .why-item svg {
    width: 68px !important;
    height: 68px !important;
  }
  .about-page .why-card-stack .why-item h3 {
    font-size: clamp(1.2rem, 1.55vw, 1.62rem) !important;
    line-height: 1.04 !important;
  }
  .about-page .why-card-stack .why-item p {
    color: rgba(18,24,23,.72) !important;
    font-size: .9rem !important;
    line-height: 1.5 !important;
  }
}

/* Desktop Enquiries: raise the four-card deck so the fourth card is fully visible. */
@media (min-width: 981px) {
  .enquiries-page .contact-scroll-deck {
    height: min(700px, 74svh) !important;
  }
  .enquiries-page .contact-scroll-card {
    min-height: 250px !important;
    width: min(405px, 33vw) !important;
    padding: 26px !important;
  }
}

/* Mobile About intro: retain redesigned block but use the v23 image as the background. */
@media (max-width: 980px) {
  .about-page .about-cinematic .about-card {
    background:
      linear-gradient(180deg, rgba(239,233,220,.88), rgba(225,219,208,.88)),
      url('assets/images/about-main.jpg') center/cover no-repeat !important;
    color: var(--jic-ink, #121817) !important;
  }

  /* Mobile About Why: vertical, service-panel-inspired cards; clean and responsive. */
  .about-page .why-section.why-card-stack {
    background: var(--jic-cream, #efe9dc) !important;
    padding: 58px 0 44px !important;
    min-height: auto !important;
    overflow: visible !important;
  }
  .about-page .why-card-stack > .container {
    display: block !important;
    height: auto !important;
    position: static !important;
    overflow: visible !important;
    padding-block: 0 !important;
  }
  .about-page .why-stack-track {
    display: block !important;
    height: auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .about-page .why-card-stack .why-item {
    position: sticky !important;
    top: 92px !important;
    left: auto !important;
    width: 100% !important;
    min-height: 360px !important;
    margin: 0 0 18px !important;
    padding: 30px 26px !important;
    border-radius: 30px !important;
    background: rgba(239,233,220,.98) !important;
    color: var(--jic-ink, #121817) !important;
    border: 1px solid rgba(18,24,23,.12) !important;
    box-shadow: 0 26px 68px rgba(18,24,23,.14) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .about-page .why-card-stack .why-item:nth-child(2) { top: 108px !important; z-index: 2 !important; }
  .about-page .why-card-stack .why-item:nth-child(3) { top: 124px !important; z-index: 3 !important; }
  .about-page .why-card-stack .why-item svg {
    width: 76px !important;
    height: 76px !important;
    margin: 0 0 auto !important;
  }

  /* Mobile appointment overlay: active card description replaces header/subheader while user scrolls/swipes. */
  .booking-overlay .overlay-booking-options a span,
  .booking-overlay .overlay-booking-options a b {
    opacity: 1 !important;
    max-height: 120px !important;
    transform: translateY(0) !important;
    transition: opacity .24s ease, max-height .24s ease, transform .24s ease !important;
  }
  .booking-overlay .overlay-booking-options a small {
    opacity: 0 !important;
    max-height: 0 !important;
    transform: translateY(12px) !important;
    overflow: hidden !important;
    transition: opacity .28s ease, max-height .28s ease, transform .28s ease !important;
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }
  .booking-overlay .overlay-booking-options a.is-description-visible span,
  .booking-overlay .overlay-booking-options a.is-description-visible b {
    opacity: 0 !important;
    max-height: 0 !important;
    transform: translateY(-10px) !important;
    overflow: hidden !important;
  }
  .booking-overlay .overlay-booking-options a.is-description-visible small {
    opacity: .96 !important;
    max-height: 180px !important;
    transform: translateY(0) !important;
  }

  /* Mobile Services: less empty space below the Our Painting Services cards. */
  .services-page .service-image-pin {
    padding-bottom: 28px !important;
  }
  .services-page .service-image-pin .services-pin-stack {
    margin-bottom: 0 !important;
  }
  .services-page .service-image-pin .service-panel:last-child {
    margin-bottom: 0 !important;
  }

  /* Mobile Services Residential / Commercial: darker brand backgrounds, tighter spacing. */
  .services-page .services-work-strip {
    background: var(--jic-charcoal, #121817) !important;
    color: var(--jic-cream, #efe9dc) !important;
  }
  .services-page .services-work-strip + .services-work-strip {
    background: var(--jic-charcoal-2, #1d2320) !important;
    padding-top: 20px !important;
    margin-top: 0 !important;
  }
  .services-page .services-work-strip .work-scroll-head {
    padding-top: 0 !important;
    margin-bottom: 14px !important;
  }
}


/* V32 WHATSAPP LOCK — transparent v25 launched card dimensions, video larger than icon, one dash only. */
@media (min-width: 981px) {
  .whatsapp-mini:not(.is-minimised) {
    left: 18px !important;
    right: auto !important;
    bottom: 18px !important;
    width: 206px !important;
    min-width: 206px !important;
    max-width: 206px !important;
    height: auto !important;
    min-height: 86px !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: 1fr 72px !important;
    gap: 5px !important;
    padding: 5px !important;
    border-radius: 12px !important;
    overflow: visible !important;
    background: rgba(18,24,23,.10) !important;
    border: 1px solid rgba(239,233,220,.26) !important;
    box-shadow: 0 24px 64px rgba(18,24,23,.24) !important;
    backdrop-filter: blur(14px) !important;
  }
  .whatsapp-mini:not(.is-minimised)::after,
  .whatsapp-mini:not(.is-minimised) .wa-mini-body {
    display: none !important;
  }
  .whatsapp-mini:not(.is-minimised) .wa-video-pane,
  .whatsapp-mini:not(.is-minimised) .wa-icon-pane {
    position: relative !important;
    z-index: 1 !important;
    height: 74px !important;
    min-height: 74px !important;
    border-radius: 9px !important;
    overflow: hidden !important;
  }
  .whatsapp-mini:not(.is-minimised) .wa-video-pane {
    background: rgba(18,24,23,.08) !important;
    border: 1px solid rgba(239,233,220,.18) !important;
  }
  .whatsapp-mini:not(.is-minimised) .wa-video-pane video,
  .whatsapp-mini:not(.is-minimised) video {
    width: 100% !important;
    height: 100% !important;
    min-height: 74px !important;
    object-fit: cover !important;
    opacity: .94 !important;
    filter: saturate(.9) contrast(1.02) !important;
    border-radius: 9px !important;
  }
  .whatsapp-mini:not(.is-minimised) .wa-icon-pane {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(239,233,220,.16) !important;
    border: 1px solid rgba(239,233,220,.22) !important;
    color: #22c55e !important;
    cursor: pointer !important;
  }
  .whatsapp-mini:not(.is-minimised) .wa-icon-pane svg {
    width: 28px !important;
    height: 28px !important;
  }
  .whatsapp-mini .wa-mini-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: -26px !important;
    right: 8px !important;
    z-index: 10 !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(239,233,220,.28) !important;
    background: rgba(18,24,23,.78) !important;
    color: var(--jic-cream, #efe9dc) !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    padding: 0 !important;
    cursor: pointer !important;
  }
  .whatsapp-mini:not(.is-minimised) .wa-mini-open {
    display: none !important;
  }
  .whatsapp-mini.is-minimised {
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    min-height: 62px !important;
    max-width: 62px !important;
    max-height: 62px !important;
    border-radius: 999px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: rgba(18,24,23,.48) !important;
    border: 1px solid rgba(239,233,220,.22) !important;
    backdrop-filter: blur(12px) !important;
  }
  .whatsapp-mini.is-minimised .wa-video-pane,
  .whatsapp-mini.is-minimised .wa-icon-pane,
  .whatsapp-mini.is-minimised .wa-mini-close,
  .whatsapp-mini.is-minimised video,
  .whatsapp-mini.is-minimised .wa-mini-body {
    display: none !important;
  }
  .whatsapp-mini.is-minimised .wa-mini-open {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 62px !important;
    height: 62px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--jic-cream, #efe9dc) !important;
    font-weight: 900 !important;
    cursor: pointer !important;
  }
}


/* V33 FINAL PATCH — restore requested WhatsApp/v25 proportions, desktop deck behaviour, and nav shape. */

/* Desktop navigation: less rounded, closer to Book Appointment button geometry. */
@media (min-width: 981px) {
  .site-header.reveal-header .header-inner,
  .site-header.scroll-header .header-inner {
    border-radius: 22px !important;
  }
  .site-header.reveal-header .nav-left a,
  .site-header.reveal-header .nav-right a,
  .site-header.reveal-header .nav-booking-cta,
  .site-header.scroll-header .nav-left a,
  .site-header.scroll-header .nav-right a,
  .site-header.scroll-header .header-booking-trigger {
    border-radius: 14px !important;
  }
}

/* Desktop WhatsApp: v25 dimensions/panel proportions, transparent launched card, one redesigned minimiser. */
@media (min-width: 981px) {
  .whatsapp-mini:not(.is-minimised) {
    left: 18px !important;
    right: auto !important;
    bottom: 18px !important;
    width: 206px !important;
    min-width: 206px !important;
    max-width: 206px !important;
    height: auto !important;
    min-height: 86px !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: 1fr 72px !important;
    gap: 5px !important;
    padding: 5px !important;
    border-radius: 12px !important;
    overflow: visible !important;
    background: rgba(18,24,23,.10) !important;
    border: 1px solid rgba(239,233,220,.26) !important;
    box-shadow: 0 24px 64px rgba(18,24,23,.24) !important;
    backdrop-filter: blur(14px) !important;
  }
  .whatsapp-mini:not(.is-minimised)::after,
  .whatsapp-mini:not(.is-minimised) .wa-mini-body {
    display: none !important;
  }
  .whatsapp-mini:not(.is-minimised) .wa-video-pane,
  .whatsapp-mini:not(.is-minimised) .wa-icon-pane {
    position: relative !important;
    z-index: 1 !important;
    height: 74px !important;
    min-height: 74px !important;
    border-radius: 9px !important;
    overflow: hidden !important;
  }
  .whatsapp-mini:not(.is-minimised) .wa-video-pane {
    background: rgba(18,24,23,.08) !important;
    border: 1px solid rgba(239,233,220,.18) !important;
  }
  .whatsapp-mini:not(.is-minimised) .wa-video-pane video,
  .whatsapp-mini:not(.is-minimised) video {
    width: 100% !important;
    height: 100% !important;
    min-height: 74px !important;
    object-fit: cover !important;
    opacity: .94 !important;
    filter: saturate(.9) contrast(1.02) !important;
    border-radius: 9px !important;
  }
  .whatsapp-mini:not(.is-minimised) .wa-icon-pane {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(239,233,220,.16) !important;
    border: 1px solid rgba(239,233,220,.22) !important;
    color: #22c55e !important;
    cursor: pointer !important;
  }
  .whatsapp-mini:not(.is-minimised) .wa-icon-pane svg {
    width: 28px !important;
    height: 28px !important;
  }
  .whatsapp-mini .wa-mini-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: -24px !important;
    right: 8px !important;
    z-index: 10 !important;
    width: 34px !important;
    height: 18px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(239,233,220,.28) !important;
    background: rgba(18,24,23,.72) !important;
    color: var(--jic-cream, #efe9dc) !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    padding: 0 !important;
    cursor: pointer !important;
    box-shadow: 0 12px 28px rgba(18,24,23,.18) !important;
  }
  .whatsapp-mini:not(.is-minimised) .wa-mini-open {
    display: none !important;
  }
  .whatsapp-mini.is-minimised {
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    min-height: 62px !important;
    max-width: 62px !important;
    max-height: 62px !important;
    border-radius: 999px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: rgba(18,24,23,.48) !important;
    border: 1px solid rgba(239,233,220,.22) !important;
    backdrop-filter: blur(12px) !important;
  }
  .whatsapp-mini.is-minimised .wa-video-pane,
  .whatsapp-mini.is-minimised .wa-icon-pane,
  .whatsapp-mini.is-minimised .wa-mini-close,
  .whatsapp-mini.is-minimised video,
  .whatsapp-mini.is-minimised .wa-mini-body {
    display: none !important;
  }
  .whatsapp-mini.is-minimised .wa-mini-open {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 62px !important;
    height: 62px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--jic-cream, #efe9dc) !important;
    font-weight: 900 !important;
    cursor: pointer !important;
  }
  .whatsapp-qr-panel {
    width: min(226px, calc(100vw - 32px)) !important;
    left: 18px !important;
    bottom: 116px !important;
    padding: 18px 16px 14px !important;
    border-radius: 0 !important;
    z-index: 9200 !important;
  }
  .whatsapp-qr-panel.open {
    display: block !important;
  }
}

/* Desktop About: wider copy area, smaller opaque cards, tighter icon/text spacing. */
@media (min-width: 981px) {
  .about-page .why-card-stack > .container {
    grid-template-columns: minmax(540px, 1.18fr) minmax(360px, .82fr) !important;
    gap: clamp(38px, 4vw, 72px) !important;
  }
  .about-page .why-desktop-copy {
    max-width: 840px !important;
    width: 100% !important;
  }
  .about-page .why-desktop-copy .section-intro {
    max-width: 780px !important;
  }
  .about-page .why-card-stack .why-item {
    width: min(345px, 29vw) !important;
    min-height: 292px !important;
    padding: 24px 23px !important;
    background: rgba(246,242,232,.99) !important;
    opacity: 0 !important;
    overflow: hidden !important;
  }
  .about-page .why-card-stack .why-item svg,
  .about-page .why-card-stack .why-item .trusted-icon {
    width: 62px !important;
    height: 62px !important;
    margin: 0 0 16px !important;
  }
  .about-page .why-card-stack .why-item h3 {
    margin: 0 0 9px !important;
    font-size: clamp(1.18rem, 1.45vw, 1.54rem) !important;
  }
  .about-page .why-card-stack .why-item p {
    margin: 0 !important;
    font-size: .88rem !important;
    line-height: 1.48 !important;
  }
}

/* Desktop enquiries deck: lifted higher so all cards fit; keeps one-by-one scroll reveal and cursor tracking JS. */
@media (min-width: 981px) {
  .enquiries-page .contact-scroll-deck {
    height: min(650px, 70svh) !important;
  }
  .enquiries-page .contact-scroll-card {
    min-height: 232px !important;
    width: min(390px, 31.5vw) !important;
    padding: 24px !important;
  }
}


/* V38 requested correction layer: v33 base, only About card sizing/opacity, Enquiries hover, WhatsApp v25 compact split. */

@media (min-width: 981px) {
  .about-page .why-section.why-card-stack {
    min-height: 330vh !important;
  }
  .about-page .why-card-stack > .container,
  .about-page .why-section.why-story-scroll > .container,
  .about-page .why-section .work-track-shell {
    grid-template-columns: minmax(560px, 1.18fr) minmax(340px, .82fr) !important;
    gap: clamp(34px, 4vw, 72px) !important;
  }
  .about-page .why-desktop-copy {
    max-width: 840px !important;
    width: 100% !important;
  }
  .about-page .why-desktop-copy h2,
  .about-page .why-desktop-copy .section-title {
    max-width: 800px !important;
  }
  .about-page .why-desktop-copy .section-intro {
    max-width: 760px !important;
  }
  .about-page .why-stack-track,
  .about-page .why-card-stack .why-grid {
    height: min(590px, 70svh) !important;
    min-height: 500px !important;
  }
  .about-page .why-card-stack .why-item {
    width: min(330px, 27vw) !important;
    min-height: 272px !important;
    padding: 20px 20px 22px !important;
    border-radius: 17px !important;
    background: rgba(239,233,220,.99) !important;
    color: var(--jic-ink, #121817) !important;
    border: 1px solid rgba(18,24,23,.14) !important;
    box-shadow: 0 24px 64px rgba(18,24,23,.16) !important;
    opacity: 0 !important;
    overflow: hidden !important;
    justify-content: flex-start !important;
    gap: 0 !important;
  }
  .about-page .why-card-stack .why-item svg,
  .about-page .why-card-stack .why-item .trusted-icon {
    width: 50px !important;
    height: 50px !important;
    margin: 0 0 12px 0 !important;
    flex: 0 0 auto !important;
  }
  .about-page .why-card-stack .why-item h3 {
    margin: 0 0 8px 0 !important;
    font-size: clamp(1.08rem, 1.22vw, 1.36rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -.035em !important;
  }
  .about-page .why-card-stack .why-item p {
    margin: 0 !important;
    font-size: .8rem !important;
    line-height: 1.42 !important;
  }

  .enquiries-page .contact-scroll-card {
    transition: box-shadow .2s ease, filter .2s ease, border-color .2s ease !important;
  }
  .enquiries-page .contact-scroll-card.route-3 > span:first-child {
    display: inline-block !important;
    margin-bottom: 22px !important;
  }
  .enquiries-page .contact-scroll-card:hover,
  .enquiries-page .contact-scroll-card.is-cursor-card {
    z-index: 999 !important;
    filter: saturate(1.06) contrast(1.03) !important;
    border-color: rgba(239,233,220,.42) !important;
    box-shadow: 0 34px 96px rgba(18,24,23,.36) !important;
  }

  .whatsapp-mini:not(.is-minimised) {
    left: 18px !important;
    right: auto !important;
    bottom: 18px !important;
    width: 206px !important;
    min-width: 206px !important;
    max-width: 206px !important;
    height: auto !important;
    min-height: 86px !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: 1fr 72px !important;
    gap: 5px !important;
    padding: 5px !important;
    border-radius: 12px !important;
    overflow: visible !important;
    background: rgba(168,179,149,.22) !important;
    border: 1px solid rgba(239,233,220,.30) !important;
    box-shadow: 0 24px 64px rgba(18,24,23,.24) !important;
    backdrop-filter: blur(14px) saturate(1.1) !important;
  }
  .whatsapp-mini:not(.is-minimised)::after,
  .whatsapp-mini:not(.is-minimised) .wa-mini-body,
  .whatsapp-mini:not(.is-minimised) .wa-mini-open {
    display: none !important;
  }
  .whatsapp-mini:not(.is-minimised) .wa-video-pane,
  .whatsapp-mini:not(.is-minimised) .wa-icon-pane {
    height: 74px !important;
    min-height: 74px !important;
    border-radius: 9px !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 1 !important;
  }
  .whatsapp-mini:not(.is-minimised) .wa-video-pane {
    background: rgba(18,24,23,.10) !important;
    border: 1px solid rgba(239,233,220,.20) !important;
  }
  .whatsapp-mini:not(.is-minimised) .wa-video-pane video,
  .whatsapp-mini:not(.is-minimised) video {
    width: 100% !important;
    height: 100% !important;
    min-height: 74px !important;
    object-fit: cover !important;
    object-position: center !important;
    opacity: .94 !important;
    border-radius: 9px !important;
  }
  .whatsapp-mini:not(.is-minimised) .wa-icon-pane {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(18,24,23,.18) !important;
    border: 1px solid rgba(239,233,220,.24) !important;
    color: #25d366 !important;
    cursor: pointer !important;
  }
  .whatsapp-mini:not(.is-minimised) .wa-icon-pane svg {
    width: 28px !important;
    height: 28px !important;
  }
  .whatsapp-mini .wa-mini-close {
    position: absolute !important;
    top: -26px !important;
    right: 8px !important;
    z-index: 100 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(239,233,220,.30) !important;
    background: rgba(18,24,23,.72) !important;
    color: var(--jic-cream, #efe9dc) !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    cursor: pointer !important;
  }
  .whatsapp-mini.is-minimised {
    left: 18px !important;
    bottom: 18px !important;
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    min-height: 62px !important;
    border-radius: 999px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: rgba(168,179,149,.86) !important;
    border: 1px solid rgba(18,24,23,.16) !important;
    backdrop-filter: blur(12px) !important;
  }
  .whatsapp-mini.is-minimised .wa-video-pane,
  .whatsapp-mini.is-minimised .wa-icon-pane,
  .whatsapp-mini.is-minimised .wa-mini-close,
  .whatsapp-mini.is-minimised video,
  .whatsapp-mini.is-minimised .wa-mini-body {
    display: none !important;
  }
  .whatsapp-mini.is-minimised .wa-mini-open {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 62px !important;
    height: 62px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--brand-ink, #101412) !important;
    font-weight: 900 !important;
    cursor: pointer !important;
  }
}


/* V52 FINAL SURGICAL CORRECTIONS
   Only fixes requested after V51. */

/* Enquiries CTA remains close to the fields. */
.enquiries-page #quote-form .form-panel { gap: 10px !important; }
.enquiries-page #quote-form .form-panel .form-actions { margin-top: 0 !important; }
.enquiries-page #quote-form .form-panel [data-progress-button],
.enquiries-page #quote-form .form-panel button[type="submit"] { margin-top: 0 !important; }

@media (min-width: 981px) {
  /* Desktop enquiries: lift intro-card deck only; do not alter card height. */
  .enquiries-page .contact-scroll-deck {
    transform: translateY(-78px) !important;
  }

  /* Desktop WhatsApp: keep widget size, make panels fit neatly. */
  .whatsapp-mini:not(.is-minimised) {
    position: fixed !important;
    left: 18px !important;
    right: auto !important;
    bottom: 18px !important;
    width: 182px !important;
    min-width: 182px !important;
    max-width: 182px !important;
    height: 78px !important;
    min-height: 78px !important;
    max-height: 78px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 58px !important;
    gap: 5px !important;
    padding: 5px !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
    background: rgba(168,179,149,.22) !important;
    border: 1px solid rgba(239,233,220,.30) !important;
    box-shadow: 0 22px 58px rgba(18,24,23,.22) !important;
    backdrop-filter: blur(14px) !important;
    overflow: visible !important;
    z-index: 4500 !important;
  }
  .whatsapp-mini:not(.is-minimised)::after,
  .whatsapp-mini:not(.is-minimised) .wa-mini-body,
  .whatsapp-mini:not(.is-minimised) .wa-mini-open {
    display: none !important;
  }
  .whatsapp-mini:not(.is-minimised) .wa-video-pane,
  .whatsapp-mini:not(.is-minimised) .wa-icon-pane {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 66px !important;
    min-height: 66px !important;
    max-height: 66px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border-radius: 9px !important;
    overflow: hidden !important;
    align-self: stretch !important;
  }
  .whatsapp-mini:not(.is-minimised) .wa-icon-pane {
    flex: none !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(239,233,220,.24) !important;
    background: rgba(18,24,23,.18) !important;
    color: #25d366 !important;
    cursor: pointer !important;
  }
  .whatsapp-mini:not(.is-minimised) .wa-icon-pane svg {
    width: 26px !important;
    height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
  }
  .whatsapp-mini:not(.is-minimised) .wa-video-pane video,
  .whatsapp-mini:not(.is-minimised) video {
    width: 100% !important;
    height: 100% !important;
    min-height: 66px !important;
    max-height: 66px !important;
    object-fit: cover !important;
    object-position: center !important;
    opacity: .94 !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    filter: none !important;
  }
  .whatsapp-mini .wa-mini-close {
    position: absolute !important;
    right: 6px !important;
    top: -24px !important;
    width: 22px !important;
    height: 22px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(239,233,220,.35) !important;
    background: rgba(18,24,23,.72) !important;
    color: var(--jic-cream, var(--cream, #efe9dc)) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
    z-index: 4601 !important;
    box-shadow: none !important;
  }
  .whatsapp-mini .wa-mini-close::before,
  .whatsapp-mini .wa-mini-close::after { content: none !important; }
  .whatsapp-mini.is-minimised {
    left: 18px !important;
    bottom: 18px !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    max-width: 58px !important;
    max-height: 58px !important;
    border-radius: 999px !important;
    background: rgba(168,179,149,.86) !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(18,24,23,.16) !important;
    z-index: 4500 !important;
  }
  .whatsapp-mini.is-minimised .wa-video-pane,
  .whatsapp-mini.is-minimised .wa-icon-pane,
  .whatsapp-mini.is-minimised .wa-mini-close,
  .whatsapp-mini.is-minimised video,
  .whatsapp-mini.is-minimised .wa-mini-body {
    display: none !important;
  }
  .whatsapp-mini.is-minimised .wa-mini-open {
    display: grid !important;
    place-items: center !important;
    width: 58px !important;
    height: 58px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--jic-ink, var(--ink, #121817)) !important;
    font-weight: 900 !important;
    cursor: pointer !important;
  }
  .whatsapp-qr-panel {
    position: fixed !important;
    left: 18px !important;
    bottom: 108px !important;
    width: 210px !important;
    background: var(--jic-cream, var(--cream, #efe9dc)) !important;
    color: var(--jic-ink, var(--ink, #121817)) !important;
    padding: 16px 14px 12px !important;
    z-index: 4600 !important;
    display: none;
    box-shadow: 0 28px 80px rgba(18,24,23,.16) !important;
    border-radius: 0 !important;
  }
  .whatsapp-qr-panel.open { display: block !important; }
  .whatsapp-qr-panel .whatsapp-qr-close {
    position: absolute !important;
    top: 4px !important;
    right: 6px !important;
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font-size: 1.4rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
  }
  .whatsapp-qr-panel img {
    width: 92px !important;
    height: 92px !important;
    margin: 0 auto 10px !important;
    display: block !important;
    object-fit: contain !important;
  }
  .whatsapp-qr-panel h3 {
    text-transform: uppercase !important;
    text-align: center !important;
    margin: 0 0 6px !important;
    font-size: 1.18rem !important;
    line-height: 1 !important;
  }
  .whatsapp-qr-panel p {
    text-align: center !important;
    font-size: .8rem !important;
    line-height: 1.35 !important;
    margin: 0 0 12px !important;
    color: rgba(18,24,23,.64) !important;
  }
  .whatsapp-qr-panel .whatsapp-qr-action {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: var(--jic-ink, var(--ink, #121817)) !important;
    color: var(--jic-cream, var(--cream, #efe9dc)) !important;
    padding: 10px !important;
    border-radius: 0 !important;
    font-size: .72rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
  }

  /* Desktop About: stronger reduction and opaque cards with better icon/text spacing. */
  .about-page .why-card-stack > .container,
  .about-page .why-section.why-story-scroll > .container {
    grid-template-columns: minmax(460px, 1fr) minmax(230px, .54fr) !important;
    align-items: center !important;
  }
  .about-page .why-stack-track,
  .about-page .why-card-stack .why-grid {
    height: min(430px, 52svh) !important;
  }
  .about-page .why-card-stack .why-item,
  .about-page .why-card-stack .why-v41-card {
    width: min(218px, 18vw) !important;
    min-height: 172px !important;
    height: 172px !important;
    padding: 15px 16px 16px !important;
    border-radius: 18px !important;
    background: #efe9dc !important;
    border: 1px solid rgba(18,24,23,.15) !important;
    box-shadow: 0 14px 38px rgba(18,24,23,.13) !important;
    color: var(--jic-ink, var(--ink, #121817)) !important;
    opacity: 1 !important;
    overflow: hidden !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }
  .about-page .why-card-stack .why-item > svg { display: none !important; }
  .about-page .why-card-stack .why-v41-icon {
    width: 30px !important;
    height: 30px !important;
    display: block !important;
    object-fit: contain !important;
    margin: 0 0 9px 0 !important;
  }
  .about-page .why-card-stack .why-item h3 {
    margin: 0 0 6px !important;
    font-family: "Instrument Serif", Georgia, serif !important;
    font-size: clamp(1rem, 1.02vw, 1.18rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -.035em !important;
    color: var(--jic-ink, var(--ink, #121817)) !important;
  }
  .about-page .why-card-stack .why-item p {
    margin: 0 !important;
    font-size: clamp(.64rem, .7vw, .76rem) !important;
    line-height: 1.34 !important;
    color: rgba(18,24,23,.68) !important;
  }
}

@media (max-width: 980px) {
  /* Fix mobile enquiries being trapped in loader/static overlay state. */
  .enquiries-page .site-loader,
  .enquiries-page .loader,
  .enquiries-page .preloader {
    pointer-events: none !important;
  }
  body.enquiries-page.loaded .site-loader,
  body.enquiries-page.loaded .loader,
  body.enquiries-page.loaded .preloader,
  html.is-loaded body.enquiries-page .site-loader,
  html.is-loaded body.enquiries-page .loader,
  html.is-loaded body.enquiries-page .preloader {
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important;
  }

  /* Restore mobile enquiries as a tight responsive route stack. */
  .enquiries-page .contact-scroll-hero {
    min-height: auto !important;
    padding: 112px 0 34px !important;
    background-position: center !important;
  }
  .enquiries-page .contact-scroll-hero .hero-content {
    width: min(92vw, 520px) !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
  .enquiries-page .contact-scroll-hero h1 {
    text-align: center !important;
    margin-bottom: 12px !important;
  }
  .enquiries-page .contact-scroll-hero p {
    max-width: 34rem !important;
    margin: 0 auto 22px !important;
  }
  .enquiries-page .contact-scroll-deck {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 22px auto 0 !important;
    padding-bottom: 0 !important;
    transform: none !important;
  }
  .enquiries-page .contact-scroll-card {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    min-height: 156px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Mobile About intro image/card retained. */
  .about-page .about-cinematic {
    position: relative !important;
    background-image: linear-gradient(180deg, rgba(18,24,23,.22), rgba(18,24,23,.42)), url("assets/images/about-mobile-hero.jpg") !important;
    background-size: cover !important;
    background-position: center !important;
    padding: 118px 0 42px !important;
    min-height: auto !important;
  }
  .about-page .about-cinematic .about-stage { display: block !important; min-height: auto !important; }
  .about-page .about-cinematic .about-image { display: none !important; }
  .about-page .about-cinematic .about-card {
    width: min(92vw, 430px) !important;
    margin: 0 auto !important;
    background: rgba(239,233,220,.98) !important;
    color: var(--jic-ink, var(--ink, #121817)) !important;
    border-radius: 26px !important;
    padding: 28px 24px 30px !important;
    box-shadow: 0 24px 70px rgba(18,24,23,.22) !important;
  }

  /* Mobile About Why Choose Us: service-card-sized vertical sticky stack. */
  .about-page .why-card-stack {
    padding: 72px 0 76px !important;
    min-height: auto !important;
  }
  .about-page .why-card-stack > .container,
  .about-page .why-section.why-story-scroll > .container {
    display: block !important;
  }
  .about-page .why-desktop-copy {
    width: min(90vw, 520px) !important;
    margin: 0 auto 22px !important;
    text-align: left !important;
  }
  .about-page .why-stack-track,
  .about-page .why-card-stack .why-grid {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    gap: 16px !important;
    width: min(90vw, 520px) !important;
    margin: 0 auto !important;
  }
  .about-page .why-card-stack .why-item,
  .about-page .why-card-stack .why-v41-card {
    position: sticky !important;
    top: 86px !important;
    width: 100% !important;
    min-height: 500px !important;
    height: 500px !important;
    padding: 28px 24px 30px !important;
    border-radius: 30px !important;
    background: #efe9dc !important;
    border: 1px solid rgba(18,24,23,.12) !important;
    box-shadow: 0 22px 58px rgba(18,24,23,.14) !important;
    transform: none !important;
    opacity: 1 !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
  }
  .about-page .why-card-stack .why-item:nth-child(2) { top: 102px !important; z-index: 2 !important; }
  .about-page .why-card-stack .why-item:nth-child(3) { top: 118px !important; z-index: 3 !important; }
  .about-page .why-card-stack .why-v41-icon {
    width: 58px !important;
    height: 58px !important;
    margin: 0 0 20px !important;
    display: block !important;
  }

  /* Mobile Residential/Commercial backgrounds retained. */
  .services-page .services-work-strip { padding: 58px 0 64px !important; }
  .services-page .services-work-strip:nth-of-type(3) {
    background: #2f3734 !important;
    color: var(--jic-cream, #efe9dc) !important;
  }
  .services-page .services-work-strip:nth-of-type(4) {
    background: #3f4840 !important;
    color: var(--jic-cream, #efe9dc) !important;
  }
  .services-page .services-work-strip:nth-of-type(3) .section-intro,
  .services-page .services-work-strip:nth-of-type(4) .section-intro {
    color: rgba(239,233,220,.72) !important;
  }
  .services-page .services-work-strip:nth-of-type(3) .service-work-slide,
  .services-page .services-work-strip:nth-of-type(4) .service-work-slide {
    border: 0 !important;
    outline: 0 !important;
  }

  /* Animated illuminated progress rails, clamped to final dot. */
  .deck-progress,
  .booking-progress {
    position: relative !important;
    width: min(72vw, 340px) !important;
    height: 2px !important;
    margin: 18px auto 0 !important;
    background: rgba(239,233,220,.26) !important;
    border-radius: 999px !important;
    overflow: visible !important;
    color: var(--jic-cream, #efe9dc) !important;
  }
  .about-page .deck-progress { background: rgba(18,24,23,.16) !important; color: var(--jic-ink, #121817) !important; }
  .deck-progress::after,
  .booking-progress::after {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    width: 8px !important;
    height: 8px !important;
    transform: translateY(-50%) !important;
    border-radius: 999px !important;
    background: currentColor !important;
    box-shadow: 0 0 0 0 currentColor !important;
    animation: jicRailDotPulse 1.45s ease-in-out infinite !important;
  }
  .deck-progress span,
  .booking-progress span {
    display: block !important;
    height: 100% !important;
    width: calc(var(--deck-progress, .08) * 100%) !important;
    max-width: 100% !important;
    background: currentColor !important;
    border-radius: 999px !important;
    box-shadow: 0 0 12px currentColor !important;
  }
  .booking-progress span {
    width: calc(var(--booking-progress, .08) * 100%) !important;
  }
  @keyframes jicRailDotPulse {
    0%, 100% { opacity: .55; box-shadow: 0 0 0 0 currentColor, 0 0 10px currentColor; }
    50% { opacity: 1; box-shadow: 0 0 0 8px rgba(239,233,220,.08), 0 0 18px currentColor; }
  }

  /* Booking popup: no duplicate descriptions; first view is header/subheader before description reveal. */
  .booking-overlay .overlay-booking-options {
    position: relative !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    display: flex !important;
    gap: 14px !important;
    padding-bottom: 26px !important;
  }
  .booking-overlay .overlay-booking-options a {
    flex: 0 0 82vw !important;
    min-height: 210px !important;
    scroll-snap-align: center !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    place-items: center !important;
    text-align: center !important;
    align-content: center !important;
    --booking-desc-opacity: 0;
  }
/* V85 removed booking card text fade tied to descriptions. */
/* V85 removed generated booking card description pseudo-element. */
}


/* V54 CORRECTED — from V52.
   V52 WhatsApp widget size/layout is preserved.
   Only requested fixes are applied below. */

/* Desktop enquiries: raise only the "Have a question?" CTA closer to the form. */
.enquiries-page #quote-form .form-panel {
  gap: 8px !important;
}
.enquiries-page #quote-form .form-panel .form-actions {
  margin-top: -6px !important;
}
.enquiries-page #quote-form .form-panel [data-progress-button],
.enquiries-page #quote-form .form-panel button[type="submit"] {
  margin-top: 0 !important;
}

/* Progress clamp guard. */
.deck-progress,
.booking-progress {
  overflow: visible !important;
}
.deck-progress span,
.booking-progress span {
  max-width: 100% !important;
  transform-origin: left center !important;
}

@media (min-width: 981px) {
  /* WhatsApp: DO NOT alter V52 dimensions/layout. Only improve click target reliability. */
  .whatsapp-mini .wa-icon-pane {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 4602 !important;
  }
  .whatsapp-qr-panel {
    pointer-events: auto !important;
  }
  .whatsapp-qr-panel.open {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Desktop About: reduce actual card box dimensions and make fully opaque.
     Text sizing is deliberately not reduced. */
  .about-page .why-card-stack > .container,
  .about-page .why-section.why-story-scroll > .container {
    grid-template-columns: minmax(460px, 1fr) minmax(280px, .62fr) !important;
    align-items: center !important;
  }
  .about-page .why-stack-track,
  .about-page .why-card-stack .why-grid {
    height: min(460px, 54svh) !important;
    min-height: 360px !important;
  }
  .about-page .why-card-stack .why-item,
  .about-page .why-card-stack .why-v41-card {
    box-sizing: border-box !important;
    width: min(300px, 24vw) !important;
    max-width: min(300px, 24vw) !important;
    min-width: 0 !important;
    height: 230px !important;
    min-height: 230px !important;
    max-height: 230px !important;
    padding: 22px 22px 24px !important;
    border-radius: 24px !important;
    background: #efe9dc !important;
    background-color: #efe9dc !important;
    opacity: 1 !important;
    border: 1px solid rgba(18,24,23,.14) !important;
    box-shadow: 0 18px 48px rgba(18,24,23,.13) !important;
    color: var(--jic-ink, var(--ink, #121817)) !important;
    overflow: hidden !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .about-page .why-card-stack .why-item::before,
  .about-page .why-card-stack .why-item::after {
    opacity: 0 !important;
    display: none !important;
  }
  .about-page .why-card-stack .why-item > svg {
    display: none !important;
  }
  .about-page .why-card-stack .why-v41-icon {
    width: 46px !important;
    height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
    display: block !important;
    object-fit: contain !important;
    margin: 0 0 14px 0 !important;
  }
  .about-page .why-card-stack .why-item h3 {
    margin: 0 0 8px !important;
  }
  .about-page .why-card-stack .why-item p {
    margin: 0 !important;
  }
}

@media (max-width: 980px) {
  /* Mobile enquiries loader guard and normal responsive route stack. */
  .enquiries-page .site-loader,
  .enquiries-page .loader,
  .enquiries-page .preloader {
    pointer-events: none !important;
  }
  body.enquiries-page.loaded .site-loader,
  body.enquiries-page.loaded .loader,
  body.enquiries-page.loaded .preloader,
  html.is-loaded body.enquiries-page .site-loader,
  html.is-loaded body.enquiries-page .loader,
  html.is-loaded body.enquiries-page .preloader {
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important;
  }

  .enquiries-page .contact-scroll-hero {
    min-height: auto !important;
    padding: 112px 0 34px !important;
    background-position: center !important;
  }
  .enquiries-page .contact-scroll-hero .hero-content {
    width: min(92vw, 520px) !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
  .enquiries-page .contact-scroll-hero h1 {
    text-align: center !important;
    margin-bottom: 12px !important;
  }
  .enquiries-page .contact-scroll-hero p {
    max-width: 34rem !important;
    margin: 0 auto 22px !important;
  }
  .enquiries-page .contact-scroll-deck {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 22px auto 0 !important;
    padding-bottom: 0 !important;
    transform: none !important;
  }
  .enquiries-page .contact-scroll-card {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    min-height: 156px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Mobile About intro retained from V52. */
  .about-page .about-cinematic {
    position: relative !important;
    background-image: linear-gradient(180deg, rgba(18,24,23,.22), rgba(18,24,23,.42)), url("assets/images/about-mobile-hero.jpg") !important;
    background-size: cover !important;
    background-position: center !important;
    padding: 118px 0 42px !important;
    min-height: auto !important;
  }
  .about-page .about-cinematic .about-stage {
    display: block !important;
    min-height: auto !important;
  }
  .about-page .about-cinematic .about-image {
    display: none !important;
  }
  .about-page .about-cinematic .about-card {
    width: min(92vw, 430px) !important;
    margin: 0 auto !important;
    background: rgba(239,233,220,.98) !important;
    color: var(--jic-ink, var(--ink, #121817)) !important;
    border-radius: 26px !important;
    padding: 28px 24px 30px !important;
    box-shadow: 0 24px 70px rgba(18,24,23,.22) !important;
  }

  /* Mobile About Why Choose Us: service-card size and vertical sticky-stack style. */
  .about-page .why-card-stack {
    padding: 72px 0 92px !important;
    min-height: auto !important;
  }
  .about-page .why-card-stack > .container,
  .about-page .why-section.why-story-scroll > .container {
    display: block !important;
  }
  .about-page .why-desktop-copy {
    width: min(90vw, 520px) !important;
    margin: 0 auto 22px !important;
    text-align: left !important;
  }
  .about-page .why-stack-track,
  .about-page .why-card-stack .why-grid {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    gap: 18px !important;
    width: min(90vw, 520px) !important;
    margin: 0 auto !important;
  }
  .about-page .why-card-stack .why-item,
  .about-page .why-card-stack .why-v41-card {
    position: sticky !important;
    top: 86px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 520px !important;
    height: 520px !important;
    padding: 30px 26px 32px !important;
    border-radius: 30px !important;
    background: #efe9dc !important;
    background-color: #efe9dc !important;
    border: 1px solid rgba(18,24,23,.12) !important;
    box-shadow: 0 22px 58px rgba(18,24,23,.14) !important;
    opacity: 1 !important;
    z-index: 1 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  .about-page .why-card-stack .why-item:nth-child(2) {
    top: 104px !important;
    z-index: 2 !important;
  }
  .about-page .why-card-stack .why-item:nth-child(3) {
    top: 122px !important;
    z-index: 3 !important;
  }
  .about-page .why-card-stack .why-v41-icon {
    width: 58px !important;
    height: 58px !important;
    margin: 0 0 20px !important;
    display: block !important;
    object-fit: contain !important;
  }

  /* Progress rail: halo effect restored; bar clamped to final dot. */
  .deck-progress,
  .booking-progress {
    position: relative !important;
    width: min(72vw, 340px) !important;
    height: 2px !important;
    margin: 18px auto 0 !important;
    background: rgba(239,233,220,.26) !important;
    border-radius: 999px !important;
    overflow: visible !important;
    color: var(--jic-cream, #efe9dc) !important;
  }
  .about-page .deck-progress {
    background: rgba(18,24,23,.16) !important;
    color: var(--jic-ink, #121817) !important;
  }
  .deck-progress::after,
  .booking-progress::after {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    width: 8px !important;
    height: 8px !important;
    transform: translateY(-50%) !important;
    border-radius: 999px !important;
    background: currentColor !important;
    box-shadow: 0 0 0 0 currentColor, 0 0 12px currentColor !important;
    animation: jicV54RailHalo 1.35s ease-in-out infinite !important;
  }
  .deck-progress span,
  .booking-progress span {
    display: block !important;
    height: 100% !important;
    width: calc(var(--deck-progress, .08) * 100%) !important;
    max-width: 100% !important;
    background: currentColor !important;
    border-radius: 999px !important;
    box-shadow: 0 0 12px currentColor !important;
  }
  .booking-progress span {
    width: calc(var(--booking-progress, .08) * 100%) !important;
  }
  @keyframes jicV54RailHalo {
    0%, 100% {
      opacity: .58;
      box-shadow: 0 0 0 0 currentColor, 0 0 10px currentColor;
    }
    50% {
      opacity: 1;
      box-shadow: 0 0 0 9px rgba(239,233,220,.10), 0 0 22px currentColor;
    }
  }

  /* Booking popup: only header/subheader by default.
     Description appears only when user clicks a card. */
  .booking-overlay .overlay-booking-options {
    position: relative !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    display: flex !important;
    gap: 14px !important;
    padding-bottom: 26px !important;
  }
  .booking-overlay .overlay-booking-options a {
    flex: 0 0 82vw !important;
    min-height: 210px !important;
    scroll-snap-align: center !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    place-items: center !important;
    text-align: center !important;
    align-content: center !important;
  }
  .booking-overlay .overlay-booking-options a span,
  .booking-overlay .overlay-booking-options a b,
  .booking-overlay .overlay-booking-options a small {
    text-align: center !important;
    opacity: 1 !important;
  }
  .booking-overlay .overlay-booking-options a::after {
    content: none !important;
    display: none !important;
  }
  .booking-card-detail {
    display: none;
    position: sticky;
    left: 0;
    right: 0;
    bottom: 0;
    width: calc(100% - 28px);
    margin: 14px auto 0;
    background: rgba(239,233,220,.98);
    color: var(--jic-ink, #121817);
    border: 1px solid rgba(18,24,23,.12);
    border-radius: 20px;
    padding: 16px;
    box-shadow: 0 16px 48px rgba(18,24,23,.16);
  }
  .booking-card-detail.open {
    display: block;
  }
  .booking-card-detail p {
    margin: 0 0 12px;
    line-height: 1.45;
    color: rgba(18,24,23,.72);
    font-weight: 700;
  }
  .booking-card-detail a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--jic-ink, #121817);
    color: var(--jic-cream, #efe9dc);
    text-decoration: none;
    font-weight: 900;
    padding: 0 18px;
  }
}


/* V55 SURGICAL FIXES
   Built from V54. V54 WhatsApp widget is untouched.
   Scope limited to the user's listed desktop/mobile fixes. */

@media (min-width: 981px) {
  /* Desktop About: reduce actual card height by about one third from V54 and increase fonts. */
  .about-page .why-card-stack .why-item,
  .about-page .why-card-stack .why-v41-card {
    height: 154px !important;
    min-height: 154px !important;
    max-height: 154px !important;
    padding: 14px 18px 16px !important;
    border-radius: 20px !important;
    background: #efe9dc !important;
    background-color: #efe9dc !important;
    opacity: 1 !important;
    overflow: hidden !important;
  }
  .about-page .why-card-stack .why-v41-icon {
    width: 34px !important;
    height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    margin: 0 0 8px 0 !important;
  }
  .about-page .why-card-stack .why-item h3 {
    font-size: clamp(1.35rem, 1.75vw, 1.95rem) !important;
    line-height: .98 !important;
    margin: 0 0 6px !important;
    letter-spacing: -.04em !important;
  }
  .about-page .why-card-stack .why-item p {
    font-size: clamp(.9rem, .98vw, 1.05rem) !important;
    line-height: 1.18 !important;
    margin: 0 !important;
  }

  /* Desktop chatbot: align launcher with WhatsApp popup button level. */
  .chatbot-button,
  .chatbot-launch,
  .chat-toggle,
  [data-chatbot-open],
  .chatbot-bubble {
    bottom: 18px !important;
    right: 18px !important;
  }

  /* Desktop Enquiries: separate Have a question from Book an appointment but keep the flow soft. */
  .enquiries-page .contact-form-section,
  .enquiries-page #quote-form,
  .enquiries-page .question-section {
    position: relative !important;
    margin-top: 46px !important;
    padding-top: 54px !important;
  }
  .enquiries-page .contact-form-section::before,
  .enquiries-page #quote-form::before,
  .enquiries-page .question-section::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 0 !important;
    width: min(760px, 82vw) !important;
    height: 1px !important;
    transform: translateX(-50%) !important;
    background: linear-gradient(90deg, transparent, rgba(18,24,23,.16), transparent) !important;
  }

  /* Desktop Enquiries: keep CTA close to the form fields. */
  .enquiries-page #quote-form .form-panel {
    gap: 8px !important;
  }
  .enquiries-page #quote-form .form-panel .form-actions {
    margin-top: -6px !important;
  }
}

@media (max-width: 980px) {
  /* Hard mobile loader release for Enquiries only. */
  body.enquiries-page,
  body.enquiries-page main,
  body.enquiries-page .page-shell {
    opacity: 1 !important;
    visibility: visible !important;
  }
  body.enquiries-page .site-loader,
  body.enquiries-page .loader,
  body.enquiries-page .preloader,
  body.enquiries-page [data-loader],
  body.enquiries-page .page-loader {
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important;
    pointer-events: none !important;
  }
  body.enquiries-page.loaded .site-loader,
  html.is-loaded body.enquiries-page .site-loader {
    display: none !important;
  }

  /* Mobile About intro: keep background image and solid card, show proper subtext, remove descriptor box. */
  .about-page .about-cinematic .about-card p {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: rgba(18,24,23,.72) !important;
    font-size: clamp(1rem, 4.2vw, 1.12rem) !important;
    line-height: 1.45 !important;
  }
  .about-page .about-highlights,
  .about-page .about-proof,
  .about-page .about-pills,
  .about-page .about-tags,
  .about-page .about-meta {
    display: none !important;
  }

  /* Mobile About Why Choose Us: force same service-card scale/style and vertical sticky stack. */
  .about-page .why-card-stack {
    display: block !important;
    padding: 72px 0 110px !important;
    overflow: visible !important;
  }
  .about-page .why-card-stack > .container,
  .about-page .why-section.why-story-scroll > .container {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    padding-inline: 0 !important;
  }
  .about-page .why-desktop-copy {
    width: min(90vw, 520px) !important;
    margin: 0 auto 22px !important;
    padding: 0 !important;
  }
  .about-page .why-stack-track,
  .about-page .why-card-stack .why-grid {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    width: min(90vw, 520px) !important;
    margin: 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }
  .about-page .why-card-stack .why-item,
  .about-page .why-card-stack .why-v41-card {
    position: sticky !important;
    top: 86px !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 520px !important;
    min-height: 520px !important;
    max-height: 520px !important;
    padding: 30px 26px 32px !important;
    border-radius: 30px !important;
    background: #efe9dc !important;
    background-color: #efe9dc !important;
    border: 1px solid rgba(18,24,23,.12) !important;
    box-shadow: 0 22px 58px rgba(18,24,23,.14) !important;
    opacity: 1 !important;
    z-index: 1 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  .about-page .why-card-stack .why-item:nth-child(2) {
    top: 104px !important;
    z-index: 2 !important;
  }
  .about-page .why-card-stack .why-item:nth-child(3) {
    top: 122px !important;
    z-index: 3 !important;
  }
  .about-page .why-card-stack .why-v41-icon {
    width: 58px !important;
    height: 58px !important;
    margin: 0 0 20px !important;
    display: block !important;
    object-fit: contain !important;
  }

  /* Mobile progress rails: halo like first booking card, clamped and spanning full deck. */
  .deck-progress,
  .booking-progress {
    position: relative !important;
    display: block !important;
    width: min(74vw, 360px) !important;
    height: 2px !important;
    margin: 18px auto 0 !important;
    background: rgba(239,233,220,.26) !important;
    border-radius: 999px !important;
    overflow: visible !important;
    color: var(--jic-cream, #efe9dc) !important;
  }
  .about-page .deck-progress {
    background: rgba(18,24,23,.16) !important;
    color: var(--jic-ink, #121817) !important;
  }
  .deck-progress::after,
  .booking-progress::after {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    width: 9px !important;
    height: 9px !important;
    transform: translateY(-50%) !important;
    border-radius: 999px !important;
    background: currentColor !important;
    box-shadow: 0 0 0 0 currentColor, 0 0 14px currentColor !important;
    animation: jicV55RailHalo 1.25s ease-in-out infinite !important;
  }
  .deck-progress span,
  .booking-progress span {
    display: block !important;
    height: 100% !important;
    max-width: 100% !important;
    width: calc(var(--deck-progress, .08) * 100%) !important;
    background: currentColor !important;
    border-radius: 999px !important;
    box-shadow: 0 0 14px currentColor !important;
  }
  .booking-progress span {
    width: calc(var(--booking-progress, .08) * 100%) !important;
  }
  @keyframes jicV55RailHalo {
    0%, 100% {
      opacity: .62;
      box-shadow: 0 0 0 0 currentColor, 0 0 12px currentColor;
    }
    50% {
      opacity: 1;
      box-shadow: 0 0 0 10px rgba(239,233,220,.12), 0 0 24px currentColor;
    }
  }

  /* Mobile booking popup: no card description/swap; header/subheader only. */
  .booking-overlay .overlay-booking-options a::after {
    content: none !important;
    display: none !important;
  }
  .booking-overlay .overlay-booking-options a span,
  .booking-overlay .overlay-booking-options a b,
  .booking-overlay .overlay-booking-options a small {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Mobile booking description popup on click, with close/minimiser and fancier text treatment. */
  .booking-card-detail {
    display: none;
    position: sticky;
    left: 0;
    right: 0;
    bottom: 0;
    width: calc(100% - 28px);
    margin: 14px auto 0;
    background: rgba(239,233,220,.98);
    color: var(--jic-ink, #121817);
    border: 1px solid rgba(18,24,23,.12);
    border-radius: 22px;
    padding: 18px 16px 16px;
    box-shadow: 0 18px 54px rgba(18,24,23,.18);
  }
  .booking-card-detail.open {
    display: block;
  }
  .booking-card-detail-close {
    position: absolute;
    right: 12px;
    top: 10px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid rgba(18,24,23,.18);
    background: rgba(18,24,23,.08);
    color: var(--jic-ink, #121817);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    line-height: 1;
  }
  .booking-card-detail p {
    margin: 8px 0 14px;
    padding-right: 22px;
    font-family: "Instrument Serif", Georgia, serif !important;
    font-size: clamp(1.16rem, 5vw, 1.42rem) !important;
    line-height: 1.18 !important;
    letter-spacing: -.035em;
    color: rgba(18,24,23,.78);
  }
  .booking-card-detail a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--jic-ink, #121817);
    color: var(--jic-cream, #efe9dc);
    text-decoration: none;
    font-weight: 900;
    padding: 0 18px;
  }
}


/* V56 MOBILE ONLY: restore V30 mobile Enquiries page design. */
@media (max-width: 980px) {
  .enquiries-page .contact-scroll-hero {
    padding: 106px 0 10px !important;
    min-height: auto !important;
    overflow: visible !important;
  }
  .enquiries-page .contact-scroll-hero .hero-content {
    width: min(100% - 32px, 560px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: left !important;
  }
  .enquiries-page .mobile-contact-eyebrow {
    display: inline-flex !important;
    margin-bottom: 18px !important;
    padding: 10px 13px !important;
    border-radius: 999px !important;
    background: rgba(239,233,220,.16) !important;
    color: var(--jic-cream) !important;
    border: 1px solid rgba(239,233,220,.22) !important;
  }
  .enquiries-page .contact-scroll-hero h1 {
    text-align: center !important;
    font-size: clamp(3.8rem, 18vw, 6rem) !important;
    margin: 0 auto !important;
  }
  .enquiries-page .contact-scroll-hero .hero-content > p {
    text-align: left !important;
    margin: 28px 0 0 !important;
    color: rgba(239,233,220,.76) !important;
  }
  .enquiries-page .contact-scroll-deck {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 28px !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }
  .enquiries-page .contact-scroll-card {
    position: sticky !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    min-height: 262px !important;
    margin-bottom: 16px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
  .enquiries-page .contact-scroll-card:last-child {
    margin-bottom: 0 !important;
  }
  .enquiries-page .contact-scroll-card.route-2 {
    order: 1 !important;
    top: 92px !important;
    z-index: 1 !important;
  }
  .enquiries-page .contact-scroll-card.route-3 {
    order: 2 !important;
    top: 106px !important;
    z-index: 2 !important;
  }
  .enquiries-page .contact-scroll-card.route-4 {
    order: 3 !important;
    top: 120px !important;
    z-index: 3 !important;
  }
  .enquiries-page .contact-scroll-card.route-1 {
    order: 4 !important;
    top: 134px !important;
    z-index: 4 !important;
  }
  .enquiries-page .contact-scroll-card .route-cta {
    align-self: flex-start !important;
    width: auto !important;
    min-height: 46px !important;
  }
  .enquiries-page .booking-section {
    background: linear-gradient(180deg, var(--jic-flow-cream), var(--jic-flow-cream-2)) !important;
    padding-top: 48px !important;
    padding-bottom: 42px !important;
  }
  .enquiries-page .booking-section .services-pin-left {
    display: flex !important;
    flex-direction: column !important;
  }
  .enquiries-page .booking-section .services-pin-left .booking-mobile-launch {
    order: 1 !important;
    margin-top: 20px !important;
  }
  .enquiries-page .booking-section .services-pin-left > a[href="#quote-form"] {
    order: 2 !important;
    margin-top: 12px !important;
  }
  .enquiries-page .booking-mobile-launch,
  .enquiries-page .booking-section .services-pin-left > a[href="#quote-form"] {
    width: fit-content !important;
    min-height: 48px !important;
    padding: 0 20px !important;
  }
  .enquiries-page .contact-form-section {
    background: linear-gradient(180deg, var(--jic-flow-cream-2), var(--jic-flow-cream)) !important;
    padding-top: 48px !important;
  }
  .enquiries-page .contact-form-section .form-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }
  .enquiries-page .contact-form-section .form-panel {
    order: 1 !important;
  }
  .enquiries-page .contact-form-section .contact-details {
    order: 2 !important;
  }
  .enquiries-page .contact-form-section .form-actions {
    margin-top: 12px !important;
  }
  .enquiries-page .contact-form-section .btn[data-progress-button] {
    margin-top: 4px !important;
  }
}


/* V57 ONLY: force desktop About page “Why Choose Us” actual card height + fonts.
   Scope deliberately limited to desktop About cards only. */
@media (min-width: 981px) {
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item.why-v41-card,
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item {
    box-sizing: border-box !important;
    block-size: 205px !important;
    height: 205px !important;
    min-height: 205px !important;
    max-height: 205px !important;
    background: #efe9dc !important;
    background-color: #efe9dc !important;
    opacity: 1 !important;
    overflow: hidden !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item.why-v41-card .why-v41-icon,
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item .why-v41-icon {
    width: 44px !important;
    height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    margin: 0 0 12px 0 !important;
  }

  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item.why-v41-card h3,
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item h3 {
    font-size: clamp(1.35rem, 2vw, 2rem) !important;
    line-height: 1.15 !important;
    letter-spacing: -.055em !important;
    margin: 0 0 10px !important;
  }

  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item.why-v41-card p,
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item p {
    font-size: .93rem !important;
    line-height: 1.42 !important;
    margin: 0 !important;
  }
}


/* V58 ONLY: desktop About “Why Choose Us” final refinement.
   Scope: slightly taller card boxes + slightly wider text area only. */
@media (min-width: 981px) {
  html body.about-page main section.why-section.why-card-stack .why-desktop-copy,
  html body.about-page main section.why-section.why-card-stack .section-copy,
  html body.about-page main section.why-section.why-card-stack .section-intro {
    max-width: 720px !important;
    width: min(720px, 100%) !important;
  }

  html body.about-page main section.why-section.why-card-stack > .container,
  html body.about-page main section.why-section.why-card-stack .container {
    grid-template-columns: minmax(520px, 1.16fr) minmax(300px, .84fr) !important;
  }

  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item.why-v41-card,
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item {
    block-size: 232px !important;
    height: 232px !important;
    min-height: 232px !important;
    max-height: 232px !important;
  }
}


/* V59 ONLY: desktop final refinement.
   Scope:
   1) About page Why Choose Us card height slightly increased.
   2) About page Why Choose Us text/subtext area widened and spacing refined.
   3) About page Why Choose Us cards receive the same cursor-hover feel as Enquiries intro cards.
   4) Enquiries Book an appointment bottom space very slightly reduced.
   No mobile rules and no other sections touched. */

@media (min-width: 981px) {
  /* About “Why Choose Us”: widen text area and keep a refined text/card spacing. */
  html body.about-page main section.why-section.why-card-stack > .container,
  html body.about-page main section.why-section.why-card-stack .container {
    grid-template-columns: minmax(620px, 1.34fr) minmax(300px, .66fr) !important;
    column-gap: clamp(32px, 4vw, 70px) !important;
  }

  html body.about-page main section.why-section.why-card-stack .why-desktop-copy,
  html body.about-page main section.why-section.why-card-stack .section-copy,
  html body.about-page main section.why-section.why-card-stack .section-intro {
    max-width: 820px !important;
    width: min(820px, 100%) !important;
  }

  /* About “Why Choose Us”: slightly taller than V58. */
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item.why-v41-card,
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item {
    block-size: 252px !important;
    height: 252px !important;
    min-height: 252px !important;
    max-height: 252px !important;
    transform-style: preserve-3d !important;
    will-change: transform, box-shadow !important;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
    cursor: default !important;
  }

  /* Same cursor-hover feel as Enquiries intro cards: lift, depth, subtle active edge. */
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item.why-v41-card:hover,
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item:hover,
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item.why-hovered {
    transform: translate3d(var(--why-hover-x, 0px), var(--why-hover-y, -8px), 0) rotateX(var(--why-rotate-x, 0deg)) rotateY(var(--why-rotate-y, 0deg)) !important;
    box-shadow: 0 28px 78px rgba(18,24,23,.18) !important;
    border-color: rgba(18,24,23,.22) !important;
    z-index: 8 !important;
  }

  /* Enquiries page: very slightly reduce bottom space of the Book an appointment block. */
  html body.enquiries-page section.booking-section,
  html body.enquiries-page .booking-section {
    padding-bottom: calc(var(--section-y, 96px) * .78) !important;
  }
}


/* V60 ONLY: desktop final refinement.
   Scope strictly limited to:
   1) About Why Choose Us card height increased slightly more.
   2) About Why Choose Us text/subtext area widened.
   3) About Why Choose Us hovered card comes to the front like Enquiries intro cards.
   4) Enquiries Book an appointment bottom spacing slightly reduced.
   No mobile rules. */

@media (min-width: 981px) {
  /* About “Why Choose Us”: widen text/subtext area further. */
  html body.about-page main section.why-section.why-card-stack > .container,
  html body.about-page main section.why-section.why-card-stack .container {
    grid-template-columns: minmax(700px, 1.46fr) minmax(300px, .54fr) !important;
    column-gap: clamp(28px, 3.6vw, 62px) !important;
  }

  html body.about-page main section.why-section.why-card-stack .why-desktop-copy,
  html body.about-page main section.why-section.why-card-stack .section-copy,
  html body.about-page main section.why-section.why-card-stack .section-intro {
    max-width: 920px !important;
    width: min(920px, 100%) !important;
  }

  /* About “Why Choose Us”: slightly taller than V59. */
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item.why-v41-card,
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item {
    position: relative !important;
    block-size: 276px !important;
    height: 276px !important;
    min-height: 276px !important;
    max-height: 276px !important;
    transform-style: preserve-3d !important;
    will-change: transform, box-shadow, z-index !important;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
  }

  /* About “Why Choose Us”: hovered card comes forward/front like Enquiries intro cards. */
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item.why-v41-card:hover,
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item:hover,
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item.why-hovered,
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item.is-front {
    z-index: 999 !important;
    transform: translate3d(var(--why-hover-x, 0px), var(--why-hover-y, -10px), 36px) rotateX(var(--why-rotate-x, 0deg)) rotateY(var(--why-rotate-y, 0deg)) !important;
    box-shadow: 0 36px 96px rgba(18,24,23,.24) !important;
    border-color: rgba(18,24,23,.26) !important;
  }

  /* Enquiries page: slightly reduce base spacing of Book an appointment block. */
  html body.enquiries-page section.booking-section,
  html body.enquiries-page .booking-section {
    padding-bottom: calc(var(--section-y, 96px) * .68) !important;
  }
}


/* V61 ONLY: desktop About cards restored from V59 + requested desktop refinements.
   Scope strictly limited to:
   1) About page Why Choose Us cards restored from V59 markup.
   2) About page Why Choose Us card height increased slightly more.
   3) About page Why Choose Us text/subtext area widened.
   4) About page Why Choose Us hovered card comes to the front like Enquiries intro cards.
   5) Desktop Enquiries Book an appointment bottom spacing slightly reduced.
   No mobile rules. */

@media (min-width: 981px) {
  /* Wider Why Choose Us text/subtext area. */
  html body.about-page main section.why-section.why-card-stack > .container,
  html body.about-page main section.why-section.why-card-stack .container {
    grid-template-columns: minmax(720px, 1.48fr) minmax(300px, .52fr) !important;
    column-gap: clamp(26px, 3.2vw, 58px) !important;
  }

  html body.about-page main section.why-section.why-card-stack .why-desktop-copy,
  html body.about-page main section.why-section.why-card-stack .section-copy,
  html body.about-page main section.why-section.why-card-stack .section-intro {
    max-width: 960px !important;
    width: min(960px, 100%) !important;
  }

  /* Make sure the restored card deck is visible on desktop. */
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
  }

  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item.why-v41-card,
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    block-size: 292px !important;
    height: 292px !important;
    min-height: 292px !important;
    max-height: 292px !important;
    background: #efe9dc !important;
    background-color: #efe9dc !important;
    overflow: hidden !important;
    transform-style: preserve-3d !important;
    will-change: transform, box-shadow, z-index !important;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
  }

  /* Hovered card comes to the front, matching the Enquiries intro-card feel. */
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item.why-v41-card:hover,
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item:hover,
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item.why-hovered,
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item.is-front {
    z-index: 999 !important;
    transform: translate3d(var(--why-hover-x, 0px), var(--why-hover-y, -10px), 42px) rotateX(var(--why-rotate-x, 0deg)) rotateY(var(--why-rotate-y, 0deg)) !important;
    box-shadow: 0 38px 104px rgba(18,24,23,.25) !important;
    border-color: rgba(18,24,23,.28) !important;
  }

  /* Enquiries page: slightly reduce base spacing of Book an appointment block. */
  html body.enquiries-page section.booking-section,
  html body.enquiries-page .booking-section {
    padding-bottom: calc(var(--section-y, 96px) * .62) !important;
  }
}


/* V62 ONLY: desktop About “Why Choose Us” V59 cards restored + visible stack.
   Reason for V62: older rules left/top positioning could push the V59 card deck out of view.
   Scope strictly limited to desktop:
   1) restore/force visible V59 cards,
   2) increase card height more slightly,
   3) widen text/subtext area,
   4) hover card comes to front,
   5) reduce base spacing of Enquiries Book an appointment.
   No mobile rules. */

@media (min-width: 981px) {
  /* Wider Why Choose Us text/subtext area with card area still present. */
  html body.about-page main section.why-section.why-card-stack > .container,
  html body.about-page main section.why-section.why-card-stack .container {
    grid-template-columns: minmax(720px, 1.46fr) minmax(430px, .54fr) !important;
    column-gap: clamp(28px, 3.4vw, 62px) !important;
    align-items: center !important;
  }

  html body.about-page main section.why-section.why-card-stack .why-desktop-copy,
  html body.about-page main section.why-section.why-card-stack .section-copy,
  html body.about-page main section.why-section.why-card-stack .section-intro {
    max-width: 960px !important;
    width: min(960px, 100%) !important;
  }

  /* Force the card area itself back into view. */
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track {
    display: block !important;
    position: relative !important;
    width: min(460px, 32vw) !important;
    min-width: 360px !important;
    height: 500px !important;
    min-height: 500px !important;
    margin: 0 auto !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    isolation: isolate !important;
  }

  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item.why-v41-card,
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item {
    display: flex !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    box-sizing: border-box !important;
    width: min(360px, 28vw) !important;
    min-width: 300px !important;
    max-width: 360px !important;
    block-size: 306px !important;
    height: 306px !important;
    min-height: 306px !important;
    max-height: 306px !important;
    padding: 26px 26px 28px !important;
    border-radius: 26px !important;
    background: #efe9dc !important;
    background-color: #efe9dc !important;
    color: var(--jic-ink, var(--ink, #121817)) !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: hidden !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    border: 1px solid rgba(18,24,23,.14) !important;
    box-shadow: 0 20px 54px rgba(18,24,23,.14) !important;
    transform-style: preserve-3d !important;
    will-change: transform, box-shadow, z-index !important;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
    pointer-events: auto !important;
  }

  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item:nth-child(1) {
    --why-card-base: translate3d(-58%, -60%, 0) rotate(-3deg);
    transform: var(--why-card-base) !important;
    z-index: 1 !important;
  }
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item:nth-child(2) {
    --why-card-base: translate3d(-50%, -50%, 0) rotate(1deg);
    transform: var(--why-card-base) !important;
    z-index: 2 !important;
  }
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item:nth-child(3) {
    --why-card-base: translate3d(-42%, -40%, 0) rotate(4deg);
    transform: var(--why-card-base) !important;
    z-index: 3 !important;
  }

  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item .why-v41-icon {
    width: 50px !important;
    height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    display: block !important;
    object-fit: contain !important;
    margin: 0 0 16px 0 !important;
  }

  /* Hovered card comes to the front, like Enquiries intro cards. */
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item:hover,
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item.why-hovered,
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item.is-front {
    z-index: 999 !important;
    transform: var(--why-card-base) translate3d(var(--why-hover-x, 0px), var(--why-hover-y, -12px), 50px) rotateX(var(--why-rotate-x, 0deg)) rotateY(var(--why-rotate-y, 0deg)) !important;
    box-shadow: 0 40px 110px rgba(18,24,23,.26) !important;
    border-color: rgba(18,24,23,.30) !important;
  }

  /* Enquiries page: slightly reduce base spacing of Book an appointment block. */
  html body.enquiries-page section.booking-section,
  html body.enquiries-page .booking-section {
    padding-bottom: calc(var(--section-y, 96px) * .58) !important;
  }
}


/* V63 ONLY: restore desktop About “Why Choose Us” V59-style scroll behaviour.
   Scope: desktop About Why Choose Us card deck only, plus preserve existing V62 desktop Enquiries base spacing.
   No mobile rules. */

@media (min-width: 981px) {
  /* Restore the story-scroll section structure that makes the cards move with page scroll. */
  html body.about-page main section.why-section.why-story-scroll.why-card-stack {
    min-height: 265vh !important;
    position: relative !important;
    overflow: clip !important;
    padding: 0 !important;
  }

  html body.about-page main section.why-section.why-story-scroll.why-card-stack > .container,
  html body.about-page main section.why-section.why-card-stack > .container,
  html body.about-page main section.why-section.why-card-stack .container {
    position: sticky !important;
    top: 92px !important;
    height: calc(100svh - 92px) !important;
    min-height: calc(100svh - 92px) !important;
    display: grid !important;
    grid-template-columns: minmax(720px, 1.46fr) minmax(430px, .54fr) !important;
    column-gap: clamp(28px, 3.4vw, 62px) !important;
    align-items: center !important;
    align-content: center !important;
    overflow: visible !important;
    padding: 44px 0 !important;
  }

  html body.about-page main section.why-section.why-card-stack .why-desktop-copy,
  html body.about-page main section.why-section.why-card-stack .section-copy,
  html body.about-page main section.why-section.why-card-stack .section-intro {
    max-width: 960px !important;
    width: min(960px, 100%) !important;
  }

  /* The card stage must be visible, but cards must not be a static pile. */
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track {
    display: block !important;
    position: relative !important;
    width: min(500px, 34vw) !important;
    min-width: 380px !important;
    height: 620px !important;
    min-height: 620px !important;
    margin: 0 auto !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    isolation: isolate !important;
  }

  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item.why-v41-card,
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item {
    display: flex !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    box-sizing: border-box !important;
    width: min(370px, 29vw) !important;
    min-width: 310px !important;
    max-width: 370px !important;
    block-size: 306px !important;
    height: 306px !important;
    min-height: 306px !important;
    max-height: 306px !important;
    padding: 26px 26px 28px !important;
    border-radius: 26px !important;
    background: #efe9dc !important;
    background-color: #efe9dc !important;
    color: var(--jic-ink, var(--ink, #121817)) !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: hidden !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    border: 1px solid rgba(18,24,23,.14) !important;
    box-shadow: 0 20px 54px rgba(18,24,23,.14) !important;
    transform-style: preserve-3d !important;
    will-change: transform, box-shadow, opacity, z-index !important;
    transition: box-shadow .22s ease, border-color .22s ease !important;
    pointer-events: auto !important;
  }

  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item .why-v41-icon {
    width: 50px !important;
    height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    display: block !important;
    object-fit: contain !important;
    margin: 0 0 16px 0 !important;
  }

  /* Hovered card comes to the front without cancelling scroll-driven positioning. */
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item:hover,
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item.why-hovered,
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item.is-front {
    z-index: 999 !important;
    box-shadow: 0 40px 110px rgba(18,24,23,.26) !important;
    border-color: rgba(18,24,23,.30) !important;
  }

  /* Preserve the requested Enquiries base-space reduction. */
  html body.enquiries-page section.booking-section,
  html body.enquiries-page .booking-section {
    padding-bottom: calc(var(--section-y, 96px) * .58) !important;
  }
}


/* V64 ONLY: desktop About “Why Choose Us” sequential scroll entry.
   Scope: the About page Why Choose Us card deck only.
   No mobile rules. No other desktop sections changed. */
@media (min-width: 981px) {
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track {
    overflow: visible !important;
    isolation: isolate !important;
  }

  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item {
    will-change: transform, opacity, box-shadow, z-index !important;
    transition: box-shadow .22s ease, border-color .22s ease !important;
  }

  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item.why-hovered,
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item.is-front,
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item:hover {
    z-index: 999 !important;
    box-shadow: 0 40px 110px rgba(18,24,23,.26) !important;
    border-color: rgba(18,24,23,.30) !important;
  }
}


/* V65 ONLY: desktop About “Why Choose Us” final spacing/fan refinement.
   Scope: About page Why Choose Us block only.
   Changes:
   - Wider text/subtext area.
   - Reduced horizontal spacing between text area and cards.
   - Cards fan out more clearly.
   No mobile rules. No other desktop sections changed. */
@media (min-width: 981px) {
  html body.about-page main section.why-section.why-story-scroll.why-card-stack > .container,
  html body.about-page main section.why-section.why-card-stack > .container,
  html body.about-page main section.why-section.why-card-stack .container {
    grid-template-columns: minmax(820px, 1.66fr) minmax(410px, .34fr) !important;
    column-gap: clamp(8px, 1.25vw, 24px) !important;
  }

  html body.about-page main section.why-section.why-card-stack .why-desktop-copy,
  html body.about-page main section.why-section.why-card-stack .section-copy,
  html body.about-page main section.why-section.why-card-stack .section-intro {
    max-width: 1080px !important;
    width: min(1080px, 100%) !important;
  }

  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track {
    width: min(520px, 35vw) !important;
    min-width: 410px !important;
  }

  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item {
    transform-origin: 50% 88% !important;
  }
}


/* V66 ONLY: desktop About “Why Choose Us” card position/internal spacing.
   Scope:
   - Move the card fan slightly left so the right card is not cut off.
   - Balance icon/header/subtext spacing inside the cards.
   No mobile rules. No other desktop sections changed. */
@media (min-width: 981px) {
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track {
    transform: translateX(-64px) !important;
  }

  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item,
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item.why-v41-card {
    padding: 30px 28px 30px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0 !important;
  }

  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item .why-v41-icon {
    margin: 0 0 22px 0 !important;
    flex: 0 0 auto !important;
  }

  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item h3 {
    margin: 0 0 16px 0 !important;
    flex: 0 0 auto !important;
  }

  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item p {
    margin: 0 !important;
    flex: 0 0 auto !important;
    max-width: 95% !important;
  }
}


/* V67 ONLY: desktop About “Why Choose Us” card-left/font/text-width refinement.
   Scope:
   - Move card fan a bit further left.
   - Slightly increase card fonts.
   - Widen Why Choose Us text area further to the right.
   No mobile rules. No other desktop sections changed. */
@media (min-width: 981px) {
  html body.about-page main section.why-section.why-story-scroll.why-card-stack > .container,
  html body.about-page main section.why-section.why-card-stack > .container,
  html body.about-page main section.why-section.why-card-stack .container {
    grid-template-columns: minmax(900px, 1.78fr) minmax(390px, .22fr) !important;
    column-gap: clamp(4px, .75vw, 16px) !important;
  }

  html body.about-page main section.why-section.why-card-stack .why-desktop-copy,
  html body.about-page main section.why-section.why-card-stack .section-copy,
  html body.about-page main section.why-section.why-card-stack .section-intro {
    max-width: 1180px !important;
    width: min(1180px, 100%) !important;
  }

  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track {
    transform: translateX(-112px) !important;
  }

  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item h3 {
    font-size: clamp(1.48rem, 2.16vw, 2.16rem) !important;
    line-height: 1.08 !important;
  }

  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item p {
    font-size: 1rem !important;
    line-height: 1.42 !important;
  }
}


/* V68 ONLY: desktop About “Why Choose Us” card fan-left, hover-surface reliability and font refinement.
   Scope:
   - Fan cards slightly further left.
   - Make hover-front behaviour work across the full visible card surface.
   - Slightly increase card fonts.
   No mobile rules. No other desktop sections changed. */
@media (min-width: 981px) {
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track {
    transform: translateX(-140px) !important;
  }

  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item {
    pointer-events: auto !important;
    isolation: isolate !important;
  }

  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item > * {
    position: relative !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }

  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item .why-hover-surface {
    position: absolute !important;
    inset: 0 !important;
    z-index: 9 !important;
    display: block !important;
    background: transparent !important;
    pointer-events: auto !important;
  }

  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item h3 {
    font-size: clamp(1.56rem, 2.28vw, 2.28rem) !important;
    line-height: 1.06 !important;
  }

  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item p {
    font-size: 1.05rem !important;
    line-height: 1.40 !important;
  }

  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item.why-hovered,
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item.is-front,
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track > article.why-item:hover {
    z-index: 999 !important;
    box-shadow: 0 44px 116px rgba(18,24,23,.28) !important;
    border-color: rgba(18,24,23,.32) !important;
  }
}


/* V69 ONLY: final two desktop tweaks.
   Scope:
   - Fan About “Why Choose Us” cards out just a little bit more.
   - Raise/evenly position Enquiries demarcation line between Book an appointment and Have a question.
   No mobile rules. No other desktop sections changed. */
@media (min-width: 981px) {
  html body.about-page main section.why-section.why-card-stack div.why-grid.why-stack-track {
    transform: translateX(-140px) !important;
  }

  html body.enquiries-page .contact-form-section,
  html body.enquiries-page #quote-form,
  html body.enquiries-page .question-section {
    margin-top: 34px !important;
    padding-top: 34px !important;
  }

  html body.enquiries-page .contact-form-section::before,
  html body.enquiries-page #quote-form::before,
  html body.enquiries-page .question-section::before {
    top: 0 !important;
  }
}


/* V70 ONLY: desktop Enquiries demarcation-line spacing.
   Scope:
   - Reposition the line between “Book an appointment” and “Have a question?” so it sits evenly between both blocks.
   No mobile rules. No other desktop sections changed. */
@media (min-width: 981px) {
  html body.enquiries-page .contact-form-section,
  html body.enquiries-page #quote-form,
  html body.enquiries-page .question-section {
    margin-top: 48px !important;
    padding-top: 48px !important;
  }

  html body.enquiries-page .contact-form-section::before,
  html body.enquiries-page #quote-form::before,
  html body.enquiries-page .question-section::before {
    top: 0 !important;
  }
}


/* V71 ONLY: desktop Enquiries spacing after “Prefer to ask a question” CTA + separation line lift.
   Scope:
   - Remove a bit of the space after the “Prefer to ask a question” CTA.
   - Slightly raise the demarcation line between “Book an appointment” and “Have a question?”.
   No mobile rules. No other desktop sections changed. */
@media (min-width: 981px) {
  html body.enquiries-page .contact-form-section,
  html body.enquiries-page #quote-form,
  html body.enquiries-page .question-section {
    margin-top: 38px !important;
    padding-top: 48px !important;
  }

  html body.enquiries-page .contact-form-section::before,
  html body.enquiries-page #quote-form::before,
  html body.enquiries-page .question-section::before {
    top: 0 !important;
  }
}


/* V72 ONLY: desktop Enquiries separation line raised slightly more.
   Scope:
   - Raise only the demarcation line between “Book an appointment” and “Have a question?”.
   - Keep the Have a question block/content position stable by balancing margin-top and padding-top.
   No mobile rules. No other desktop sections changed. */
@media (min-width: 981px) {
  html body.enquiries-page .contact-form-section,
  html body.enquiries-page #quote-form,
  html body.enquiries-page .question-section {
    margin-top: 26px !important;
    padding-top: 60px !important;
  }

  html body.enquiries-page .contact-form-section::before,
  html body.enquiries-page #quote-form::before,
  html body.enquiries-page .question-section::before {
    top: 0 !important;
  }
}


/* V78 MOBILE DIRECT REBUILD — desktop untouched.
   All visual changes below are scoped to max-width: 980px only. */
@media (max-width: 980px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body,
  body.home-page,
  body.about-page,
  body.services-page,
  body.enquiries-page {
    opacity: 1 !important;
    visibility: visible !important;
  }

  body .site-loader,
  body .loader,
  body .preloader,
  body .page-loader,
  body [data-loader] {
    pointer-events: none !important;
  }

  /* Clean mobile enquiries page built from the desktop content. */
  body.enquiries-page main#main {
    display: none !important;
  }

  body.enquiries-page main.jic-mobile-enquiries-clean {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 100% !important;
    overflow-x: hidden !important;
    background: var(--jic-cream, #efe9dc) !important;
    color: var(--jic-ink, #121817) !important;
  }

  .jic-mobile-contact-hero {
    position: relative !important;
    min-height: auto !important;
    padding: 112px 0 30px !important;
    background-size: cover !important;
    background-position: center !important;
    color: var(--jic-cream, #efe9dc) !important;
    overflow: hidden !important;
  }

  .jic-mobile-contact-hero::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
      linear-gradient(180deg, rgba(18,24,23,.64), rgba(18,24,23,.48) 42%, rgba(18,24,23,.80)),
      radial-gradient(circle at 50% 8%, rgba(239,233,220,.14), transparent 48%) !important;
    pointer-events: none !important;
  }

  .jic-mobile-contact-inner {
    position: relative !important;
    z-index: 2 !important;
    width: min(100% - 32px, 560px) !important;
    margin: 0 auto !important;
  }

  .jic-mobile-eyebrow {
    display: inline-flex !important;
    margin: 0 auto 18px !important;
    padding: 9px 13px !important;
    border-radius: 999px !important;
    background: rgba(239,233,220,.14) !important;
    border: 1px solid rgba(239,233,220,.24) !important;
    color: rgba(239,233,220,.86) !important;
    font-size: .76rem !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
  }

  .jic-mobile-contact-hero h1 {
    margin: 0 auto !important;
    text-align: center !important;
    font-family: "Instrument Serif", Georgia, serif !important;
    font-size: clamp(4rem, 18vw, 6.2rem) !important;
    line-height: .88 !important;
    letter-spacing: -.075em !important;
    max-width: 8ch !important;
  }

  .jic-mobile-contact-hero p {
    margin: 26px 0 0 !important;
    color: rgba(239,233,220,.78) !important;
    font-weight: 700 !important;
    line-height: 1.55 !important;
    text-align: left !important;
  }

  .jic-mobile-contact-cards {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    margin-top: 26px !important;
    overflow: visible !important;
  }

  .jic-mobile-contact-card {
    position: sticky !important;
    top: 88px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    width: 100% !important;
    min-height: 246px !important;
    margin: 0 !important;
    padding: 24px !important;
    border: 1px solid rgba(239,233,220,.22) !important;
    border-radius: 28px !important;
    background: rgba(239,233,220,.92) !important;
    color: var(--jic-ink, #121817) !important;
    text-align: left !important;
    text-decoration: none !important;
    box-shadow: 0 26px 76px rgba(0,0,0,.22) !important;
    appearance: none !important;
    font: inherit !important;
  }

  .jic-mobile-contact-card:nth-child(2) { top: 104px !important; z-index: 2 !important; }
  .jic-mobile-contact-card:nth-child(3) { top: 120px !important; z-index: 3 !important; }
  .jic-mobile-contact-card:nth-child(4) { top: 136px !important; z-index: 4 !important; }

  .jic-mobile-contact-card span {
    font-weight: 900 !important;
    color: rgba(18,24,23,.42) !important;
    margin-bottom: auto !important;
  }

  .jic-mobile-contact-card strong {
    display: block !important;
    margin-top: 28px !important;
    font-family: "Instrument Serif", Georgia, serif !important;
    font-size: clamp(2rem, 9vw, 3rem) !important;
    line-height: .92 !important;
    letter-spacing: -.06em !important;
  }

  .jic-mobile-contact-card em {
    display: block !important;
    margin-top: 12px !important;
    color: rgba(18,24,23,.66) !important;
    font-style: normal !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
  }

  .jic-mobile-contact-card b {
    display: inline-flex !important;
    align-self: flex-start !important;
    margin-top: 18px !important;
    min-height: 42px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    align-items: center !important;
    background: var(--jic-ink, #121817) !important;
    color: var(--jic-cream, #efe9dc) !important;
    font-weight: 900 !important;
  }

  .jic-mobile-booking-block,
  .jic-mobile-question-block {
    padding: 54px 20px !important;
    background: var(--jic-cream, #efe9dc) !important;
    color: var(--jic-ink, #121817) !important;
  }

  .jic-mobile-question-block {
    padding-top: 34px !important;
    background: #e7dfd1 !important;
  }
    
  .jic-mobile-block-copy,
  .jic-mobile-form,
  .jic-mobile-socials {
    width: min(100%, 560px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .jic-mobile-block-copy h2 {
    margin: 0 !important;
    font-family: "Instrument Serif", Georgia, serif !important;
    font-size: clamp(3rem, 14vw, 5rem) !important;
    line-height: .88 !important;
    letter-spacing: -.075em !important;
    text-align: left !important;
  }

  .jic-mobile-block-copy p {
    margin: 18px 0 0 !important;
    color: rgba(18,24,23,.68) !important;
    font-weight: 750 !important;
    line-height: 1.56 !important;
  }
  
  .jic-mobile-block-copy span {
  display: block !important;
  margin-top: 28px !important;
  font-family: "Instrument Serif", Georgia, serif !important;
  font-size: clamp(2rem, 9vw, 3rem) !important;
  line-height: .92 !important;
  letter-spacing: -.06em !important;
    }

  .jic-mobile-block-copy .btn {
    margin-top: 18px !important;
    width: 100% !important;
    justify-content: center !important;
  }

  .jic-mobile-block-copy .btn + .btn {
    margin-top: 10px !important;
  }

  .jic-mobile-contact-lines {
    display: grid !important;
    gap: 10px !important;
    margin-top: 18px !important;
  }

  .jic-mobile-contact-lines a {
    display: flex !important;
    min-height: 46px !important;
    align-items: center !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    background: rgba(18,24,23,.08) !important;
    color: var(--jic-ink, #121817) !important;
    text-decoration: none !important;
    font-weight: 900 !important;
  }

  .jic-mobile-form {
    display: grid !important;
    gap: 12px !important;
    margin-top: 24px !important;
    padding: 20px !important;
    border-radius: 28px !important;
    background: rgba(239,233,220,.82) !important;
    border: 1px solid rgba(18,24,23,.10) !important;
    box-shadow: 0 20px 70px rgba(18,24,23,.10) !important;
  }

  .jic-mobile-form label {
    display: grid !important;
    gap: 7px !important;
    font-size: .78rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    color: rgba(18,24,23,.54) !important;
  }

  .jic-mobile-form input,
  .jic-mobile-form select,
  .jic-mobile-form textarea {
    width: 100% !important;
    min-height: 48px !important;
    border: 1px solid rgba(18,24,23,.14) !important;
    border-radius: 16px !important;
    padding: 12px 13px !important;
    background: rgba(255,255,255,.50) !important;
    color: var(--jic-ink, #121817) !important;
    font: inherit !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
  }

  .jic-mobile-form button {
    margin-top: 4px !important;
    width: 100% !important;
    justify-content: center !important;
  }

  .jic-mobile-socials {
    margin-top: 24px !important;
    text-align: center !important;
  }

  .jic-mobile-socials span {
    display: block !important;
    margin-bottom: 12px !important;
    font-weight: 900 !important;
    color: rgba(18,24,23,.58) !important;
  }

  .jic-mobile-socials div {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
  }

  .jic-mobile-socials a {
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 999px !important;
    background: rgba(18,24,23,.09) !important;
  }

  .jic-mobile-socials img {
    width: 18px !important;
    height: 18px !important;
  }

  /* Mobile About intro and Why Choose Us alignment. */
  body.about-page .about-overlap.about-cinematic .about-card,
  body.about-page .about-cinematic .about-card {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    align-items: center !important;
    justify-items: center !important;
  }

  body.about-page .about-overlap.about-cinematic .about-card *,
  body.about-page .about-cinematic .about-card * {
    text-align: center !important;
  }

  body.about-page .about-highlights,
  body.about-page .about-proof,
  body.about-page .about-pills,
  body.about-page .about-tags,
  body.about-page .about-meta,
  body.about-page .about-card :is(.tag, .pill, .eyebrow, .kicker) {
    display: none !important;
  }

  body.about-page .why-card-stack .why-desktop-copy,
  body.about-page .why-card-stack .section-header,
  body.about-page .why-card-stack .section-title,
  body.about-page .why-card-stack .section-intro {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: min(90vw, 620px) !important;
    width: min(90vw, 620px) !important;
  }

  body.about-page .why-card-stack .section-intro {
    margin-top: 14px !important;
  }

  body.about-page .why-card-stack .why-grid,
  body.about-page .why-card-stack .why-stack-track {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    width: min(90vw, 520px) !important;
    margin: 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  body.about-page .why-card-stack .why-item,
  body.about-page .why-card-stack .why-v41-card {
    position: sticky !important;
    top: 86px !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 520px !important;
    min-height: 520px !important;
    max-height: 520px !important;
    padding: 30px 26px 32px !important;
    border-radius: 30px !important;
    background: #efe9dc !important;
    color: var(--jic-ink, #121817) !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: center !important;
    text-align: center !important;
  }

  body.about-page .why-card-stack .why-item:nth-child(2) { top: 104px !important; z-index: 2 !important; }
  body.about-page .why-card-stack .why-item:nth-child(3) { top: 122px !important; z-index: 3 !important; }

  body.about-page .why-card-stack .why-v41-icon {
    width: 58px !important;
    height: 58px !important;
    align-self: center !important;
    margin: 0 auto 10px !important;
    display: block !important;
    object-fit: contain !important;
  }

  body.about-page .why-card-stack .why-item h3 {
    text-align: center !important;
    margin: 0 auto 14px !important;
  }

  body.about-page .why-card-stack .why-item p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Mobile booking popup clean bounded horizontal deck. */
  body .booking-overlay {
    overflow-x: hidden !important;
  }

  body .booking-overlay .booking-overlay-inner {
    width: min(calc(100vw - 24px), 620px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100svh - 34px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 22px !important;
    border-radius: 30px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  body .booking-overlay .booking-overlay-inner > div:first-child {
    order: 1 !important;
  }

  body .booking-overlay .booking-overlay-side {
    display: none !important;
  }

  body .booking-overlay .overlay-booking-options {
    order: 2 !important;
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 14px !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 0 14px !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  body .booking-overlay .overlay-booking-options a {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    min-height: 238px !important;
    box-sizing: border-box !important;
    scroll-snap-align: center !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    place-items: center !important;
    align-content: center !important;
    justify-items: center !important;
    gap: 12px !important;
    padding: 24px 22px !important;
    border-radius: 28px !important;
    background: rgba(239,233,220,.94) !important;
    color: var(--jic-ink, #121817) !important;
    text-align: center !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    perspective: none !important;
    backface-visibility: visible !important;
  }

  body .booking-overlay .overlay-booking-options a span,
  body .booking-overlay .overlay-booking-options a b,
  body .booking-overlay .overlay-booking-options a small {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    text-align: center !important;
    position: relative !important;
    z-index: 2 !important;
    max-height: none !important;
  }

  body .booking-overlay .overlay-booking-options a::before,
  body .booking-overlay .overlay-booking-options a::after,
  body .booking-overlay .overlay-booking-options a.is-description-visible::before,
  body .booking-overlay .overlay-booking-options a.is-description-visible::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    max-height: 0 !important;
  }

  body .booking-overlay .overlay-booking-options a.is-description-visible span,
  body .booking-overlay .overlay-booking-options a.is-description-visible b,
  body .booking-overlay .overlay-booking-options a.is-description-visible small {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    max-height: none !important;
  }

  body .booking-overlay .booking-progress {
    order: 3 !important;
    position: relative !important;
    display: block !important;
    width: min(74vw, 360px) !important;
    max-width: 100% !important;
    height: 2px !important;
    margin: 2px auto 0 !important;
    overflow: visible !important;
    border-radius: 999px !important;
    background: rgba(239,233,220,.26) !important;
    color: var(--jic-cream, #efe9dc) !important;
  }

  body .booking-overlay .booking-progress span {
    display: block !important;
    width: calc(min(1, var(--booking-progress, .08)) * 100%) !important;
    max-width: 100% !important;
    height: 100% !important;
    border-radius: 999px !important;
    background: currentColor !important;
    box-shadow: 0 0 14px currentColor !important;
  }

  body .booking-overlay .booking-progress::after,
  body .deck-progress::after {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    width: 10px !important;
    height: 10px !important;
    transform: translate(50%, -50%) !important;
    border-radius: 999px !important;
    background: currentColor !important;
    animation: jicV78HaloPulse 1.18s ease-in-out infinite !important;
  }

  @keyframes jicV78HaloPulse {
    0%, 100% { opacity: .66; box-shadow: 0 0 0 0 currentColor, 0 0 12px currentColor; }
    50% { opacity: 1; box-shadow: 0 0 0 11px rgba(239,233,220,.13), 0 0 26px currentColor; }
  }

  body .booking-overlay .booking-card-detail {
    order: 4 !important;
    display: none !important;
    position: relative !important;
    width: 100% !important;
    max-width: 430px !important;
    margin: 14px auto 0 !important;
    padding: 20px 18px 18px !important;
    border-radius: 22px !important;
    background: rgba(239,233,220,.98) !important;
    color: var(--jic-ink, #121817) !important;
    text-align: center !important;
  }

  body .booking-overlay .booking-card-detail.open {
    display: block !important;
  }

  body .booking-overlay .booking-card-detail-close {
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(18,24,23,.18) !important;
    background: rgba(18,24,23,.08) !important;
    color: var(--jic-ink, #121817) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    z-index: 5 !important;
  }

  body .booking-overlay .booking-card-detail p {
    margin: 10px auto 16px !important;
    padding: 0 26px !important;
    max-width: 34ch !important;
    font-family: "Instrument Serif", Georgia, serif !important;
    font-size: clamp(1.16rem, 5vw, 1.42rem) !important;
    line-height: 1.18 !important;
    letter-spacing: -.035em !important;
    color: rgba(18,24,23,.78) !important;
    text-align: center !important;
  }

  body .booking-overlay .booking-card-detail a {
    display: flex !important;
    width: min(260px, 76vw) !important;
    min-height: 46px !important;
    margin: 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: var(--jic-ink, #121817) !important;
    color: var(--jic-cream, #efe9dc) !important;
    text-decoration: none !important;
    font-weight: 900 !important;
    padding: 0 18px !important;
    text-align: center !important;
  }
}

@media (min-width: 981px) {
  body.enquiries-page main.jic-mobile-enquiries-clean {
    display: none !important;
  }
}


/* V79 MOBILE ONLY — About alignment + Booking popup cleanup.
   Desktop untouched. */
@media (max-width: 980px) {
  /* About intro text box must be centred and any descriptor/tag removed. */
  body.about-page .about-overlap.about-cinematic,
  body.about-page .about-cinematic {
    display: flex !important;
    justify-content: center !important;
  }

  body.about-page .about-overlap.about-cinematic .about-stage,
  body.about-page .about-cinematic .about-stage {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(100% - 28px, 620px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.about-page .about-overlap.about-cinematic .about-card,
  body.about-page .about-cinematic .about-card {
    width: min(92vw, 520px) !important;
    max-width: min(92vw, 520px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center !important;
    justify-self: center !important;
    text-align: center !important;
    align-items: center !important;
    justify-items: center !important;
  }

  body.about-page .about-overlap.about-cinematic .about-card *,
  body.about-page .about-cinematic .about-card * {
    text-align: center !important;
  }

  body.about-page .about-highlights,
  body.about-page .about-proof,
  body.about-page .about-pills,
  body.about-page .about-tags,
  body.about-page .about-meta,
  body.about-page .about-card :is(.tag, .pill, .eyebrow, .kicker),
  body.about-page [data-about-proof],
  body.about-page [data-about-tags],
  body.about-page [data-about-highlights] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  /* About Why Choose Us cards: service-card width, centred stack, no narrow/left alignment. */
  body.about-page .why-card-stack {
    overflow: visible !important;
  }

  body.about-page .why-card-stack > .container,
  body.about-page .why-section.why-story-scroll > .container {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }

  body.about-page .why-card-stack .why-desktop-copy,
  body.about-page .why-card-stack .section-header,
  body.about-page .why-card-stack .section-title,
  body.about-page .why-card-stack .section-intro {
    width: min(90vw, 620px) !important;
    max-width: min(90vw, 620px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  body.about-page .why-card-stack .section-intro {
    margin-top: 14px !important;
  }

  body.about-page .why-card-stack .why-grid,
  body.about-page .why-card-stack .why-stack-track {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
    width: min(90vw, 520px) !important;
    max-width: min(90vw, 520px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
  }

  body.about-page .why-card-stack .why-item,
  body.about-page .why-card-stack .why-v41-card {
    position: sticky !important;
    top: 86px !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 520px !important;
    min-height: 520px !important;
    max-height: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 30px 26px 32px !important;
    border-radius: 30px !important;
    background: #efe9dc !important;
    color: var(--jic-ink, #121817) !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: center !important;
    text-align: center !important;
  }

  body.about-page .why-card-stack .why-item:nth-child(2) { top: 104px !important; z-index: 2 !important; }
  body.about-page .why-card-stack .why-item:nth-child(3) { top: 122px !important; z-index: 3 !important; }

  body.about-page .why-card-stack .why-v41-icon {
    width: 58px !important;
    height: 58px !important;
    align-self: center !important;
    margin: 0 auto 10px !important;
    display: block !important;
    object-fit: contain !important;
  }

  body.about-page .why-card-stack .why-item h3,
  body.about-page .why-card-stack .why-item p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.about-page .why-card-stack .why-item h3 {
    margin-bottom: 14px !important;
  }

  /* Booking popup: restore side details on mobile, but keep them after cards/progress/details. */
  body .booking-overlay .booking-overlay-inner {
    width: min(calc(100vw - 24px), 620px) !important;
    max-width: calc(100vw - 24px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    align-items: stretch !important;
  }

  body .booking-overlay .booking-overlay-side {
    order: 5 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    margin-top: 14px !important;
    padding: 16px !important;
    border-radius: 22px !important;
    background: rgba(239,233,220,.10) !important;
    border: 1px solid rgba(239,233,220,.18) !important;
    color: var(--jic-cream, #efe9dc) !important;
  }

  body .booking-overlay .booking-overlay-side div {
    display: grid !important;
    gap: 5px !important;
    min-width: 0 !important;
  }

  body .booking-overlay .booking-overlay-side span {
    font-size: .72rem !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: rgba(239,233,220,.56) !important;
  }

  body .booking-overlay .booking-overlay-side a,
  body .booking-overlay .booking-overlay-side p {
    margin: 0 !important;
    color: var(--jic-cream, #efe9dc) !important;
    text-decoration: none !important;
    font-weight: 850 !important;
    overflow-wrap: anywhere !important;
  }

  /* Booking cards: only header + subtext. No generated descriptions, no flip, no scroll-swap, no lone illustration. */
  body .booking-overlay .overlay-booking-options {
    order: 2 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 14px !important;
    padding: 0 0 14px !important;
    margin: 0 !important;
    scroll-snap-type: x mandatory !important;
    transform: none !important;
  }

  body .booking-overlay .overlay-booking-options a {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    min-height: 238px !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    justify-items: center !important;
    gap: 12px !important;
    text-align: center !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: hidden !important;
  }

  body .booking-overlay .overlay-booking-options a span,
  body .booking-overlay .overlay-booking-options a b,
  body .booking-overlay .overlay-booking-options a small {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    text-align: center !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body .booking-overlay .overlay-booking-options a::before,
  body .booking-overlay .overlay-booking-options a::after,
  body .booking-overlay .overlay-booking-options a > i,
  body .booking-overlay .overlay-booking-options a > svg,
  body .booking-overlay .overlay-booking-options a > canvas,
  body .booking-overlay .overlay-booking-options a .booking-card-gesture,
  body .booking-overlay .overlay-booking-options a .swipe-hint,
  body .booking-overlay .overlay-booking-options a .swipe-illustration,
  body .booking-overlay .overlay-booking-options a [class*="gesture"],
  body .booking-overlay .overlay-booking-options a [class*="illustration"] {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    max-height: 0 !important;
    pointer-events: none !important;
  }

  body .booking-overlay .overlay-booking-options a.is-description-visible span,
  body .booking-overlay .overlay-booking-options a.is-description-visible b,
  body .booking-overlay .overlay-booking-options a.is-description-visible small {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    max-height: none !important;
  }

  body .booking-overlay .booking-progress {
    order: 3 !important;
    margin-top: 2px !important;
  }

  body .booking-overlay .booking-card-detail {
    order: 4 !important;
  }
}


/* V80 MOBILE ONLY — About tag/cards + booking popup scroll/details layout.
   Desktop untouched. */
@media (max-width: 980px) {
  /* Force-hide any remaining About intro descriptor/tag, even if inserted by older JS/CSS. */
  body.about-page .about-highlights,
  body.about-page .about-proof,
  body.about-page .about-pills,
  body.about-page .about-tags,
  body.about-page .about-meta,
  body.about-page .about-card :is(.tag, .pill, .eyebrow, .kicker),
  body.about-page [data-about-proof],
  body.about-page [data-about-tags],
  body.about-page [data-about-highlights] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.about-page .about-cinematic .about-card,
  body.about-page .about-overlap.about-cinematic .about-card {
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Mobile Why Choose Us cards: slightly shorter, centred, and internally balanced. */
  body.about-page .why-card-stack .why-grid,
  body.about-page .why-card-stack .why-stack-track {
    width: min(90vw, 520px) !important;
    max-width: min(90vw, 520px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    transform: none !important;
    overflow: visible !important;
  }

  body.about-page .why-card-stack .why-item,
  body.about-page .why-card-stack .why-v41-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 455px !important;
    min-height: 455px !important;
    max-height: 455px !important;
    padding: 34px 28px 34px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    text-align: center !important;
  }

  body.about-page .why-card-stack .why-v41-icon {
    width: 58px !important;
    height: 58px !important;
    align-self: center !important;
    margin: 0 auto 18px !important;
    flex: 0 0 auto !important;
    object-fit: contain !important;
  }

  body.about-page .why-card-stack .why-item h3 {
    margin: 0 auto 16px !important;
    text-align: center !important;
    flex: 0 0 auto !important;
  }

  body.about-page .why-card-stack .why-item p {
    margin: 0 auto !important;
    max-width: 30ch !important;
    text-align: center !important;
    flex: 0 0 auto !important;
  }

  /* Booking popup: restore vertical scrolling so appointment cards are not cut off. */
  body .booking-overlay {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    align-items: flex-start !important;
    padding-top: max(14px, env(safe-area-inset-top)) !important;
    padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
  }

  body .booking-overlay .booking-overlay-inner {
    width: min(calc(100vw - 24px), 620px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: none !important;
    min-height: auto !important;
    height: auto !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    margin: 0 auto 18px !important;
    padding: 22px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  body .booking-overlay .overlay-booking-options {
    order: 2 !important;
    flex: 0 0 auto !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-height: none !important;
    height: auto !important;
    min-height: 238px !important;
    padding-bottom: 14px !important;
  }

  body .booking-overlay .overlay-booking-options a {
    min-height: 238px !important;
    height: 238px !important;
    max-height: 238px !important;
    overflow: hidden !important;
  }

  body .booking-overlay .booking-progress {
    order: 3 !important;
    flex: 0 0 auto !important;
    margin-top: 2px !important;
  }

  body .booking-overlay .booking-card-detail {
    order: 4 !important;
    flex: 0 0 auto !important;
  }

  /* Contact details / WhatsApp / service area: plain content below cards/progress, not boxed. */
  body .booking-overlay .booking-overlay-side {
    order: 5 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--jic-cream, #efe9dc) !important;
  }

  body .booking-overlay .booking-overlay-side div {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    display: grid !important;
    gap: 4px !important;
  }

  body .booking-overlay .booking-overlay-side span {
    display: block !important;
    font-size: .7rem !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: rgba(239,233,220,.55) !important;
  }

  body .booking-overlay .booking-overlay-side a,
  body .booking-overlay .booking-overlay-side p {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--jic-cream, #efe9dc) !important;
    text-decoration: none !important;
    font-weight: 850 !important;
    line-height: 1.3 !important;
    overflow-wrap: anywhere !important;
  }
}


/* V81 MOBILE ONLY — final requested mobile fixes.
   Desktop untouched: every rule below is max-width: 980px only. */
@media (max-width: 980px) {
  /* About page: make Painting services for every need progress rail lighter and clearer. */
  body.about-page .about-service-cards + .deck-progress,
  body.about-page .about-track-shell > .deck-progress,
  body.about-page .about-service-sticky .deck-progress,
  body.about-page .about-service-cards ~ .deck-progress {
    background: rgba(255,255,255,.50) !important;
    color: #ffffff !important;
    box-shadow: 0 0 18px rgba(255,255,255,.22) !important;
  }

  body.about-page .about-service-cards + .deck-progress span,
  body.about-page .about-track-shell > .deck-progress span,
  body.about-page .about-service-sticky .deck-progress span,
  body.about-page .about-service-cards ~ .deck-progress span {
    background: #ffffff !important;
    box-shadow: 0 0 18px rgba(255,255,255,.82) !important;
  }

  body.about-page .about-service-cards + .deck-progress::after,
  body.about-page .about-track-shell > .deck-progress::after,
  body.about-page .about-service-sticky .deck-progress::after,
  body.about-page .about-service-cards ~ .deck-progress::after {
    background: #ffffff !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0 rgba(255,255,255,.72), 0 0 24px rgba(255,255,255,.94) !important;
  }

  /* About intro: remove any small descriptor/tag that may be injected or styled by older mobile code. */
  body.about-page .about-cinematic .about-card .about-tag,
  body.about-page .about-cinematic .about-card .about-tags,
  body.about-page .about-cinematic .about-card .about-pill,
  body.about-page .about-cinematic .about-card .about-pills,
  body.about-page .about-cinematic .about-card .about-meta,
  body.about-page .about-cinematic .about-card .about-proof,
  body.about-page .about-cinematic .about-card .about-highlights,
  body.about-page .about-cinematic .about-card .tag,
  body.about-page .about-cinematic .about-card .pill,
  body.about-page .about-cinematic .about-card .kicker,
  body.about-page .about-cinematic .about-card .eyebrow,
  body.about-page .about-cinematic .about-card [class*="tag"],
  body.about-page .about-cinematic .about-card [class*="pill"],
  body.about-page .about-cinematic .about-card [class*="proof"],
  body.about-page .about-cinematic .about-card [class*="highlight"],
  body.about-page .about-cinematic .about-card [data-about-proof],
  body.about-page .about-cinematic .about-card [data-about-tags],
  body.about-page .about-cinematic .about-card [data-about-highlights] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  body.about-page .about-cinematic .about-card {
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Booking popup cards: remove all card-side descriptions, generated overlays, dots and gesture/illustration elements. */
  body .booking-overlay .overlay-booking-options a,
  body .booking-overlay .overlay-booking-options a.is-description-visible,
  body .booking-overlay .overlay-booking-options a.is-active,
  body .booking-overlay .overlay-booking-options a.active {
    background-image: none !important;
    transform: none !important;
  }

  body .booking-overlay .overlay-booking-options a::before,
  body .booking-overlay .overlay-booking-options a::after,
  body .booking-overlay .overlay-booking-options a.is-description-visible::before,
  body .booking-overlay .overlay-booking-options a.is-description-visible::after,
  body .booking-overlay .overlay-booking-options a.is-active::before,
  body .booking-overlay .overlay-booking-options a.is-active::after,
  body .booking-overlay .overlay-booking-options a.active::before,
  body .booking-overlay .overlay-booking-options a.active::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    width: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    animation: none !important;
  }

  body .booking-overlay .overlay-booking-options a > :not(span):not(b):not(small),
  body .booking-overlay .overlay-booking-options a [class*="desc"],
  body .booking-overlay .overlay-booking-options a [class*="detail"],
  body .booking-overlay .overlay-booking-options a [class*="gesture"],
  body .booking-overlay .overlay-booking-options a [class*="swipe"],
  body .booking-overlay .overlay-booking-options a [class*="illustration"],
  body .booking-overlay .overlay-booking-options a [class*="dot"],
  body .booking-overlay .overlay-booking-options a [class*="pulse"],
  body .booking-overlay .overlay-booking-options a [aria-label*="swipe" i],
  body .booking-overlay .overlay-booking-options a svg,
  body .booking-overlay .overlay-booking-options a canvas,
  body .booking-overlay .overlay-booking-options a i {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    width: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    animation: none !important;
  }

  body .booking-overlay .overlay-booking-options a span,
  body .booking-overlay .overlay-booking-options a b,
  body .booking-overlay .overlay-booking-options a small {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    max-height: none !important;
    overflow: visible !important;
    text-align: center !important;
    animation: none !important;
  }

  body .booking-overlay .overlay-booking-options a small {
    margin-top: 0 !important;
  }
}


/* V82 MOBILE ONLY — About “Why Choose Us” vertical sticky stack scroll.
   Desktop untouched. No other mobile sections changed. */
@media (max-width: 980px) {
  body.about-page .why-section.why-card-stack,
  body.about-page .why-card-stack {
    position: relative !important;
    display: block !important;
    min-height: auto !important;
    height: auto !important;
    padding-top: 68px !important;
    padding-bottom: 150px !important;
    overflow: visible !important;
  }

  body.about-page .why-card-stack > .container,
  body.about-page .why-section.why-story-scroll > .container {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.about-page .why-card-stack .why-desktop-copy {
    position: relative !important;
    width: min(90vw, 620px) !important;
    max-width: min(90vw, 620px) !important;
    margin: 0 auto 24px !important;
    text-align: center !important;
    z-index: 5 !important;
  }

  body.about-page .why-card-stack .why-grid.why-stack-track,
  body.about-page .why-card-stack .why-stack-track,
  body.about-page .why-card-stack .why-grid {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    width: min(90vw, 520px) !important;
    max-width: min(90vw, 520px) !important;
    margin: 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
  }

  body.about-page .why-card-stack .why-grid.why-stack-track > .why-item,
  body.about-page .why-card-stack .why-stack-track > .why-item,
  body.about-page .why-card-stack .why-item {
    position: sticky !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 455px !important;
    min-height: 455px !important;
    max-height: 455px !important;
    margin: 0 auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    overflow: hidden !important;
  }

  body.about-page .why-card-stack .why-grid.why-stack-track > .why-item:nth-child(1),
  body.about-page .why-card-stack .why-stack-track > .why-item:nth-child(1),
  body.about-page .why-card-stack .why-item:nth-child(1) {
    top: 86px !important;
    z-index: 1 !important;
  }

  body.about-page .why-card-stack .why-grid.why-stack-track > .why-item:nth-child(2),
  body.about-page .why-card-stack .why-stack-track > .why-item:nth-child(2),
  body.about-page .why-card-stack .why-item:nth-child(2) {
    top: 104px !important;
    z-index: 2 !important;
  }

  body.about-page .why-card-stack .why-grid.why-stack-track > .why-item:nth-child(3),
  body.about-page .why-card-stack .why-stack-track > .why-item:nth-child(3),
  body.about-page .why-card-stack .why-item:nth-child(3) {
    top: 122px !important;
    z-index: 3 !important;
  }
}


/* V85 MOBILE-ONLY FINAL GUARD — physical cleanup companion.
   Desktop untouched. No scroll/layout changes outside booking cards and About intro tag. */
@media (max-width: 980px) {
  body.about-page .about-cinematic .about-card::after,
  body.about-page .about-overlap.about-cinematic .about-card::after {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body .booking-overlay .overlay-booking-options a::before,
  body .booking-overlay .overlay-booking-options a::after,
  body .booking-overlay .overlay-booking-options a.is-description-visible::before,
  body .booking-overlay .overlay-booking-options a.is-description-visible::after,
  body .booking-overlay .overlay-booking-options a.is-active::before,
  body .booking-overlay .overlay-booking-options a.is-active::after,
  body .booking-overlay .overlay-booking-options a.active::before,
  body .booking-overlay .overlay-booking-options a.active::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    animation: none !important;
    transition: none !important;
  }

  body .booking-overlay .overlay-booking-options a > :not(span):not(b):not(small),
  body .booking-overlay .overlay-booking-options a [class*="desc"],
  body .booking-overlay .overlay-booking-options a [class*="detail"],
  body .booking-overlay .overlay-booking-options a [class*="gesture"],
  body .booking-overlay .overlay-booking-options a [class*="swipe"],
  body .booking-overlay .overlay-booking-options a [class*="illustration"],
  body .booking-overlay .overlay-booking-options a [class*="dot"],
  body .booking-overlay .overlay-booking-options a [class*="pulse"],
  body .booking-overlay .overlay-booking-options a svg,
  body .booking-overlay .overlay-booking-options a canvas,
  body .booking-overlay .overlay-booking-options a i {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    animation: none !important;
    transition: none !important;
  }

  body .booking-overlay .overlay-booking-options a span,
  body .booking-overlay .overlay-booking-options a b,
  body .booking-overlay .overlay-booking-options a small {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    max-height: none !important;
    overflow: visible !important;
    animation: none !important;
    transition: none !important;
  }

  body .booking-overlay .overlay-booking-options a {
    --booking-desc-opacity: 0 !important;
  }

  body .booking-overlay .booking-card-detail-close {
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}




/* V86 MOBILE ONLY — restore Book Appointment popup from uploaded V25.
   Scope: booking popup only. Desktop untouched. */
@media (max-width: 980px) {
  body .booking-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: max(18px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom)) !important;
    background: rgba(18,24,23,.92) !important;
    color: var(--jic-cream, #efe9dc) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  body .booking-overlay.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body .booking-overlay .booking-overlay-inner {
    width: min(100%, 620px) !important;
    max-width: 620px !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 82px 0 40px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    align-items: start !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  body .booking-overlay h2 {
    margin: 0 !important;
    font-family: "Instrument Serif", Georgia, serif !important;
    font-size: clamp(3.2rem, 15vw, 5.9rem) !important;
    line-height: .88 !important;
    font-weight: 400 !important;
    letter-spacing: -.07em !important;
    color: var(--jic-cream, #efe9dc) !important;
  }

  body .booking-overlay h2 em {
    font-style: italic !important;
  }

  body .booking-overlay .overlay-note {
    margin-top: 24px !important;
    font-family: "Instrument Serif", Georgia, serif !important;
    font-style: italic !important;
    color: rgba(239,233,220,.72) !important;
    font-size: clamp(1.25rem, 6vw, 1.85rem) !important;
    line-height: 1.2 !important;
  }

  body .booking-overlay .overlay-booking-options {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    scroll-snap-type: none !important;
  }

  body .booking-overlay .overlay-booking-options a {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 18px !important;
    min-height: 92px !important;
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 18px 20px !important;
    border-radius: 18px !important;
    background: rgba(239,233,220,.92) !important;
    color: var(--jic-ink, #121817) !important;
    text-align: left !important;
    text-decoration: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body .booking-overlay .overlay-booking-options span:first-child {
    font-weight: 900 !important;
    color: var(--jic-sage-dark, #7f8d70) !important;
    text-align: left !important;
    line-height: .95 !important;
  }

  body .booking-overlay .overlay-booking-options b {
    display: block !important;
    font-size: clamp(1.2rem, 5vw, 1.72rem) !important;
    line-height: 1 !important;
    text-align: left !important;
  }

  body .booking-overlay .overlay-booking-options small {
    display: block !important;
    color: rgba(18,24,23,.58) !important;
    font-weight: 800 !important;
    text-align: right !important;
    line-height: 1.2 !important;
  }

  body .booking-overlay .overlay-booking-options a::before,
  body .booking-overlay .overlay-booking-options a::after,
  body .booking-overlay .overlay-booking-options a > :not(span):not(b):not(small),
  body .booking-overlay .booking-progress,
  body .booking-overlay .booking-card-detail,
  body .booking-overlay [data-booking-fallback] {
    display: none !important;
    content: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    animation: none !important;
  }

  body .booking-overlay .overlay-booking-options a span,
  body .booking-overlay .overlay-booking-options a b,
  body .booking-overlay .overlay-booking-options a small {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    max-height: none !important;
    overflow: visible !important;
    animation: none !important;
  }

  body .booking-overlay .booking-overlay-side {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    align-self: stretch !important;
    align-content: center !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body .booking-overlay .booking-overlay-side span {
    display: block !important;
    color: rgba(239,233,220,.58) !important;
    text-transform: uppercase !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    font-size: .84rem !important;
    margin-bottom: 8px !important;
  }

  body .booking-overlay .booking-overlay-side a,
  body .booking-overlay .booking-overlay-side p {
    color: rgba(239,233,220,.88) !important;
    font-weight: 800 !important;
    margin: 0 !important;
    line-height: 1.6 !important;
    text-decoration: none !important;
    overflow-wrap: anywhere !important;
  }

  body .booking-overlay .booking-overlay-close {
    position: absolute !important;
    top: 26px !important;
    right: 26px !important;
    width: 52px !important;
    height: 52px !important;
    border: 1px solid rgba(239,233,220,.25) !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--jic-cream, #efe9dc) !important;
    cursor: pointer !important;
    font-size: 1.7rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  
}