@import 'https://unpkg.com/open-props' layer(design.system);
@import 'https://unpkg.com/open-props/normalize.dark.min.css'
  layer(base.normalize);

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap');

@import 'https://www.unpkg.com/layout-craft@0.1.1/dist/utilities.css'
  layer(design.utilities);
/*
Source code of these utilities:
https://github.com/mobalti/layout-craft/blob/main/lib/utilities.css
*/

@layer base.normalize-overrides {

:root {
    --font-display: 'Comfortaa', 'Quicksand', system-ui, sans-serif;
    font-family: var(--font-display);

    /* --- Raya Spaces Brand Palette --- */
    --brand: #B26A46;              /* Terracotta 400 - primary brand & action */
    --brand-light: #CE8058;        /* Copper - lighter accent / hover states */
    --brand-dark: #8F4F2E;         /* Terracotta 600 - pressed/active states */
    --charcoal: #2A2724;           /* Deep Umber - headings, body text */
    --warm-white: #FBF8F1;         /* Cream - default page background */
    --warm-black: #201E1A;         /* Warm Black - dark sections, footer, hero overlays */
    --brand-gradient: linear-gradient(135deg, #B26A46, #CE8058);

    /* Supporting accents */
    --clay-tint: #F6E7DE;          /* Highlights, selected states */
    --brass: #9C7A3C;              /* Premium touches: signage gold, rules */

    /* Warm neutrals (for borders, muted text, dividers) */
    --neutral-300: #D8CEBE;
    --neutral-700: #453F38;

    /* Semantic */
    --success: #5A7A52;

    /* --- Theme surface tokens (dark = default) --- */
    --surface: var(--warm-black);
    --surface-alt: var(--charcoal);
    --text-primary: var(--warm-white);
    --text-secondary: var(--neutral-300);
    --border-subtle: var(--neutral-700);
    --surface-lo: #131210;       /* neumorphic shadow edge */
    --surface-hi: rgba(255, 255, 255, 0.035); /* neumorphic highlight edge */

    --nav-block-size: 4.625rem;
  }

  body {
    -webkit-font-smoothing: antialiased;
  }

  ul {
    list-style: none;
  }

  :is(ul, li) {
    padding: 0;
  }

  li {
    max-inline-size: unset;
  }

  figure {
    all: unset;
  }
}

@layer base.app {
  body {
    background: var(--surface); /* theme-aware base */
    min-height: 100vh;
  }
}

@layer base.containers {
  .Navbar {
    min-block-size: var(--nav-block-size);
    justify-items: center;
    padding-inline: var(--size-fluid-3);
    background-color: var(--surface);
    border-bottom: 1px solid var(--border-subtle); /* subtle luxury edge */
  }

  .Menu {
    @media (width >= 768px) {
      .NavIcon {
        display: none;
      }
    }
  }
  .NavItem {
    block-size: 100%;
    position: relative;
  }
}

@layer base.components {
  .Logo {
    inline-size: var(--size-14);

    margin: 0;
    padding: 0;
  }

  .NavLink {
    padding-inline: var(--size-4);
    block-size: 100%;

    color: var(--text-primary);
    background-color: inherit;
    font-size: var(--font-size-2);

    text-decoration-color: currentColor;
    font-weight: var(--font-weight-6);
    text-underline-offset: 1ex;

    @media (width > 1024px) {
      :is(.NavItem:focus-within, .NavItem:hover) & {
        text-decoration: underline;
        color: var(--brand-light);
      }
    }
  }

  .NavIcon {
    font-size: var(--font-size-5);
    font-weight: var(--font-weight-4);

    .NavLink:focus & {
      color: var(--brand-light);
    }
  }
}

html, body {
  margin: 0;
}

/* =========================================================
   Scroll Intro — frame-by-frame animation driven by scroll.
   The section is tall (extra scroll distance); the inner
   block sticks to the viewport while the canvas plays frames.
   Make the section taller/shorter to slow down/speed up.
   ========================================================= */

.ScrollIntro {
  position: relative;
  height: 450vh;
  background: #000;
}

.ScrollIntro-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #000;
}

#scrollIntroCanvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Thin progress line along the top edge */
.ScrollIntro-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(251, 248, 241, 0.12);
  z-index: 3;
}

.ScrollIntro-progress span {
  display: block;
  height: 100%;
  background: var(--brand-gradient);
  transform: scaleX(0);
  transform-origin: left center;
}

/* "Scroll to explore" hint, fades away once the user starts scrolling.
   The sticky block starts below the navbar, so its bottom edge is one navbar-height
   below the screen at scroll 0 — the offset below compensates so the hint is visible. */
.ScrollIntro-hint {
  position: absolute;
  left: 50%;
  bottom: calc(var(--nav-block-size) + 28px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--warm-white);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
  opacity: 0.95;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 3;
}

.ScrollIntro-hintText {
  animation: scroll-hint-pulse 2s ease-in-out infinite;
}

.ScrollIntro-mouse {
  position: relative;
  width: 26px;
  height: 42px;
  border: 2px solid var(--brand-light);
  border-radius: 14px;
  box-shadow: 0 0 18px rgba(206, 128, 88, 0.35);
}

.ScrollIntro-wheel {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--brand-light);
  animation: scroll-wheel 1.6s ease-in-out infinite;
}

.ScrollIntro-hint.is-hidden {
  opacity: 0;
}

@keyframes scroll-wheel {
  0%   { transform: translateY(0);    opacity: 1; }
  70%  { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 0; }
}

@keyframes scroll-hint-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* =========================================================
   Hero (shown before the scroll animation starts)
   A dark hero with a big serif headline and an arched door on the right.
   It sits above the canvas and fades out as soon as scrolling starts.
   ========================================================= */

.ScrollIntro-backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background-color: #14110E;
  background-image:
    radial-gradient(760px 560px at 88% 62%, rgba(178, 106, 70, 0.24), transparent 70%),
    radial-gradient(ellipse at 20% 30%, #221A14 0%, transparent 60%),
    linear-gradient(rgba(206, 128, 88, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(206, 128, 88, 0.07) 1px, transparent 1px);
  background-size: auto, auto, 75px 75px, 75px 75px;
}

.Hero,
.Hero *,
.Hero *::before,
.Hero *::after {
  box-sizing: border-box;
}

.Hero {
  --hero-ink: #FBF8F1;        /* headline */
  --hero-gold: #CE8058;       /* accent word (copper) */
  --hero-muted: #D8CEBE;      /* paragraph */
  --hero-stone: #2F2A25;      /* arch frame */
}

.Hero-inner {
  position: relative;
  height: 100%;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  /* the stage starts under the navbar, so its bottom 74px is below the fold: pad it to centre in the visible part */
  padding: 0 clamp(24px, 5vw, 96px) var(--nav-block-size, 74px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 5vw, 80px);
}

.Hero-copy {
  max-width: 760px;
  animation: hero-rise 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.Hero-title {
  margin: 0 0 clamp(18px, 3vh, 30px);
  max-inline-size: none;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 3.9rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.03em;
  color: var(--hero-ink);
}

.Hero-title em {
  font-style: normal;
  font-weight: 600;
  color: var(--hero-gold);
}

.Hero-sub {
  margin: 0 0 clamp(24px, 4.5vh, 42px);
  max-inline-size: 36em;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: var(--hero-muted);
}

/* the arched door */
.Hero-art {
  display: grid;
  place-items: center;
  animation: hero-rise 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s both;
}

.Hero-arch {
  position: relative;
  width: min(100%, 450px, calc((100svh - var(--nav-block-size, 74px) - 120px) * 0.78));
  aspect-ratio: 450 / 575;
  background: linear-gradient(180deg, #1B1814 0%, #14110E 100%);
  border: clamp(12px, 1.4vw, 20px) solid var(--hero-stone);
  border-bottom-width: clamp(12px, 1.4vw, 20px);
  border-radius: 999px 999px 0 0;
  box-shadow: 0 50px 90px rgba(0, 0, 0, 0.55), 0 0 90px rgba(178, 106, 70, 0.14);
}

.Hero-door {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 33%;
  height: 35%;
  transform: translateX(-50%);
  border: 2px solid #CE8058;
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
}

.Hero-door::after {
  content: "";
  position: absolute;
  inset: 8px 8px 0;
  border: 1px solid rgba(206, 128, 88, 0.5);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
}

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* tablets and phones: text on top, smaller arch below */
@media (width < 900px) {
  

  .Hero-inner {
    grid-template-columns: 1fr;
    align-content: center;
    gap: clamp(18px, 3vh, 32px);
    padding: 24px 22px 0;
    text-align: left;
  }

  .Hero-title {
    font-size: clamp(1.8rem, 7.5vw, 2.8rem);
  }

  .Hero-sub {
    font-size: 0.98rem;
    line-height: 1.75;
  }

  .Hero-art {
    justify-items: end;
  }

  .Hero-arch {
    width: min(46vw, 190px, calc((100svh - var(--nav-block-size, 74px) - 470px) * 0.78));
    border-width: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .Hero-copy,
  .Hero-art {
    animation: none;
  }
}

/* Info section */

/* Heading */

.services-intro {
  width: 100%;
  max-width: 620px;
  padding: 50px 24px;
  margin: 0 auto;
  text-align: center;
}
 
.services-intro h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 16px;
  padding-top: 16px;
  border-bottom: 3px solid #B26A46; 
  display: inline-block;
}
 
.services-intro p {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

/* =========================================================
   3D Open Architectural Lookbook & Catalogue Spread
   ========================================================= */

.Book-showcase-section {
  width: 100%;
  max-width: 1260px;
  margin: 40px auto 85px;
  padding: 0 24px;
}

.Book-container {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Top bar: title & chapter tab chips */
.Book-topbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 0 4px;
}

.Book-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--brand-light);
  text-transform: uppercase;
}

.Book-label i {
  font-size: 1.25rem;
  color: var(--brass);
}

.Book-chapter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chapter-tab {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.chapter-tab:hover {
  background: rgba(206, 128, 88, 0.2);
  color: var(--warm-white);
  border-color: rgba(206, 128, 88, 0.4);
}

.chapter-tab.is-active {
  background: var(--brand-gradient);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(178, 106, 70, 0.4);
}

/* =========================================================
   Services Book — an open book; Prev / Next turns a real page
   ========================================================= */

.Book,
.Book * {
  box-sizing: border-box;
}

.Book {
  position: relative;
  width: min(1100px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 16px;
  perspective: 2800px;
  background: linear-gradient(135deg, #4a2f1e, #2e1c11);
  border: 1px solid rgba(206, 128, 88, 0.35);
  border-radius: 10px 20px 20px 10px;
  box-shadow:
    0 40px 70px rgba(0, 0, 0, 0.55),
    inset 0 0 0 2px rgba(156, 122, 60, 0.45);
}

/* ---- pages ---- */
.Book-page {
  position: relative;
  min-height: 580px;
  overflow: hidden;
  display: block;
}

.Book-page--left,
.Book-leaf-back {
  background: linear-gradient(90deg, #f4ebd6 0%, #efe3c8 85%, #d9c8a2 100%);
  border-radius: 4px 0 0 4px;
  box-shadow: inset 0 0 40px rgba(120, 90, 50, 0.18);
}

.Book-page--right,
.Book-leaf-front {
  background: linear-gradient(270deg, #f4ebd6 0%, #efe3c8 85%, #d9c8a2 100%);
  border-radius: 0 4px 4px 0;
  box-shadow: inset 0 0 40px rgba(120, 90, 50, 0.18);
}

/* shadow cast on the pages while a leaf moves over them */
.Book-page::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, rgba(40, 24, 12, 0.35), rgba(40, 24, 12, 0) 70%);
}
.Book-page--right::after {
  background: linear-gradient(270deg, rgba(40, 24, 12, 0.35), rgba(40, 24, 12, 0) 70%);
}
.Book.is-flipping .Book-page::after {
  animation: bookCast 0.93s ease-in-out both;
}
@keyframes bookCast {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

/* spine / gutter shadow */
.Book-spine {
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 50%;
  width: 56px;
  transform: translateX(-50%);
  z-index: 8;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(60, 38, 20, 0) 0%,
    rgba(60, 38, 20, 0.28) 44%,
    rgba(40, 24, 12, 0.55) 50%,
    rgba(60, 38, 20, 0.28) 56%,
    rgba(60, 38, 20, 0) 100%);
}

/* ---- the turning leaf ---- */
.Book-leaf {
  display: none;
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 50%;
  right: 16px;
  z-index: 6;
  pointer-events: none;
  transform-origin: left center;
  transform-style: preserve-3d;
  will-change: transform;
}
.Book-leaf.is-active {
  display: block;
}

.Book-leaf-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.Book-leaf-back {
  transform: rotateY(180deg);
}

/* ---- left page: photo ---- */
.Book-photo {
  position: absolute;
  inset: 30px 30px 62px;
}
.Book-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 3px;
  box-shadow: 0 6px 18px rgba(60, 38, 20, 0.35);
  outline: 6px solid #fbf6ea;
}
.Book-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--warm-white);
  background: rgba(18, 16, 14, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid rgba(206, 128, 88, 0.4);
}
.Book-photo--inline {
  display: none;
}

/* ---- right page: details (keeps the site's own class names) ---- */
.Book-content {
  position: absolute;
  inset: 0;
  padding: 36px 44px 62px 56px;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.Book .book-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.Book .book-service-no {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--brand-dark);
  text-transform: uppercase;
}
.Book .book-guarantee {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #6b5326;
}
.Book .book-title {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: #2a1d12;
  margin: 12px 0 10px;
  text-align: left;
}
.Book .book-rule {
  width: 48px;
  height: 2px;
  background: var(--brand-gradient);
  margin-bottom: 16px;
  border-radius: 2px;
}
.Book .book-desc {
  font-size: 0.98rem;
  line-height: 1.65;
  color: #4d3d2d;
  margin: 0 0 18px;
  text-align: left;
  max-inline-size: none;
}
.Book .book-features-block {
  text-align: left;
  margin-bottom: 20px;
}
.Book .book-features-head {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2a1d12;
  margin-bottom: 10px;
}
.Book .book-features-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.Book .book-features-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
  line-height: 1.4;
  color: #3d2e20;
}
.Book .book-features-list li i {
  color: var(--brand-dark);
  font-size: 1.05rem;
  flex-shrink: 0;
}
.Book .book-action-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(60, 38, 20, 0.2);
}
.Book .book-enquire-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 28px;
  background: var(--brand-gradient);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(178, 106, 70, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.Book .book-enquire-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(178, 106, 70, 0.55);
}

.Book-controls {
  display: flex;
  gap: 10px;
}
.Book-nav {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  color: #3d2e20;
  background: rgba(60, 38, 20, 0.06);
  border: 1px solid rgba(60, 38, 20, 0.25);
  cursor: pointer;
  transition: all 0.25s ease;
}
.Book-nav:hover {
  background: var(--brand-light);
  border-color: var(--brand-light);
  color: #fff;
  transform: scale(1.08);
}

/* page numbers at the foot of each page */
.Book-folio {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 22px;
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(77, 61, 45, 0.65);
}
.Book-page--right .Book-folio,
.Book-leaf-front .Book-folio {
  left: 56px;
  right: 44px;
  justify-content: flex-end;
}

.Book-footer-indicator {
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-secondary);
  opacity: 0.7;
}

/* ---- tablets / phones: single page, the leaf turns away to the left ---- */
@media (max-width: 900px) {
  .Book {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px;
    border-radius: 8px 14px 14px 8px;
  }
  .Book-page--left,
  .Book-spine {
    display: none;
  }
  .Book-page {
    min-height: 0;
    overflow: visible;
  }
  .Book-page--right,
  .Book-leaf-front {
    border-radius: 4px;
  }
  .Book-leaf {
    top: 12px;
    bottom: 12px;
    left: 12px;
    right: 12px;
  }
  .Book-leaf-back > * {
    visibility: hidden;
  }
  .Book-content {
    position: relative;
    inset: auto;
    min-height: 660px;
    padding: 22px 20px 60px;
  }
  .Book-leaf-front .Book-content {
    position: absolute;
    inset: 0;
    min-height: 0;
    overflow: hidden;
  }
  .Book-photo--inline {
    display: block;
    position: relative;
    inset: auto;
    height: 210px;
    margin-bottom: 18px;
    flex: none;
  }
  .Book-page--right .Book-folio,
  .Book-leaf-front .Book-folio {
    left: 20px;
    right: 20px;
  }
  .Book .book-title {
    font-size: 1.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .Book-leaf { transition-duration: 0.01ms !important; }
}

/* Before/After Slider */

.Compare-main {
  display: grid;
  place-items: center;
  padding-block: 2rem;
}

.compare-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  width: min(1200px, 100% - 2rem);
}

@media (width < 768px) {
  .compare-grid {
    grid-template-columns: 1fr; /* stack to a single column on small screens */
  }
}

.container {
  display: grid;
  place-content: center;
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--warm-white);
  width: 100%; /* now sized by the grid track, not a fixed px value */
  --position: 50%;
}

.image-container {
  width: 100%;
  aspect-ratio: 4 / 3;
}

.slider-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left;
}

.image-before {
  position: absolute;
  inset: 0;
  width: var(--position);
  filter: grayscale(100%);
}

.slider {
  position: absolute;
  inset: 0;
  cursor: pointer;
  opacity: 0;
  width: 100%;
  height: 100%;
}

.slider:focus-visible ~ .slider-button {
  outline: 5px solid black;
  outline-offset: 3px;
}

.slider-line {
  position: absolute;
  inset: 0;
  width: 0.2rem;
  height: 100%;
  background-color: #fff;
  left: var(--position);
  transform: translateX(-50%);
  pointer-events: none;
}

.slider-button {
  position: absolute;
  background-color: #fff;
  color: black;
  padding: 0.5rem;
  border-radius: 100vw;
  display: grid;
  place-items: center;
  top: 50%;
  left: var(--position);
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-shadow: 1px 1px 1px hsla(0, 50%, 2%, 0.5);
}

/* slider slide up */

.compare-grid {
  opacity: 0;
}

.compare-grid.slide-top {
  -webkit-animation: slide-top 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
          animation: slide-top 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* The animation above had no @keyframes, so the grid stayed at opacity: 0 (blank space).
   Defining it makes the cards fade/slide in when they scroll into view. */
@keyframes slide-top {
  from {
    opacity: 0;
    transform: translateY(60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.Navbar .inline-center-center.gap-3 {
  align-items: center;
}

/* =========================================================
   Navbar stays dark in both themes.
   The navbar reads its colours from the theme tokens, so we pin
   those tokens to their dark values just for the navbar and
   everything inside it. The rest of the page still switches.
   ========================================================= */

.Navbar {
  --surface: var(--warm-black);
  --surface-alt: var(--charcoal);
  --text-primary: var(--warm-white);
  --text-secondary: var(--neutral-300);
  --border-subtle: var(--neutral-700);
}

/* =========================================================
   Footer
   ========================================================= */

.Footer {
  position: relative;
  background: var(--warm-black);
  padding-top: 64px;
  border-top: 3px solid transparent;
  border-image: var(--brand-gradient) 1;
}

.Footer-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 48px;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 40px;
}

@media (width < 980px) {
  .Footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .Footer-brand {
    grid-column: 1 / -1;
  }
}

@media (width < 560px) {
  .Footer-grid {
    grid-template-columns: 1fr;
  }
}

.Footer-logo {
  display: inline-block;
  margin-bottom: 18px;
}

.Footer-logo img {
  height: 46px;
  width: auto;
  display: block;
}

.Footer-tagline {
  font-family: var(--font-display);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--neutral-300);
  max-width: 38ch;
  margin: 0 0 20px;
}

.Footer-contact {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.Footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--neutral-300);
}

.Footer-contact i {
  color: var(--brand);
  font-size: 15px;
  margin-top: 2px;
  flex-shrink: 0;
}

.Footer-contact a {
  color: inherit;
  text-decoration: none;
}

.Footer-contact a:hover {
  color: var(--brand-light);
}

.Footer-social {
  display: flex;
  gap: 10px;
}

.Footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(251, 248, 241, 0.06);
  color: var(--brand-light);
  display: grid;
  place-items: center;
  font-size: 16px;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.Footer-social a:hover {
  background: var(--brand-gradient);
  color: var(--warm-black);
  transform: translateY(-2px);
}

.Footer-col-title {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--brass);
  margin: 0 0 18px;
}

.Footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.Footer-links a {
  font-family: var(--font-display);
  font-size: 14.5px;
  color: var(--neutral-300);
  text-decoration: none;
  transition: color 0.2s ease;
}

.Footer-links a:hover {
  color: var(--brand-light);
}

.Footer-hours-title {
  margin-top: 30px;
}

.Footer-hours {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.7;
  color: var(--neutral-300);
  margin: 0 0 4px;
}

.Footer-hours-accent {
  color: var(--brand-light);
}

.Footer-bottom {
  border-top: 1px solid var(--neutral-700);
  padding: 22px 24px;
  text-align: center;
}

.Footer-bottom p {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--neutral-300);
  opacity: 0.7;
  margin: 0;
}

/* =========================================================
   Contact / Enquiry section — neumorphic form on warm-black,
   two-column layout with intro copy on the left.
   Scoped to .Contact-section so it never touches the
   unrelated .form (sign-in modal) rules above.
   ========================================================= */

.Contact-section {
  width: 100%;
  background: var(--surface);
  padding: 40px 24px 100px;
}

.Contact-wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.8fr 1.4fr;
  gap: 64px;
  align-items: start;
  text-align: left;
}

@media (width < 900px) {
  .Contact-wrap {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

.Contact-intro {
  max-width: 38ch;
  text-align: left;
}

.Contact-eyebrow {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--brand-light);
  margin: 0 0 14px;
  font-weight: 600;
}

.Contact-heading {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.2vw, 42px);
  font-weight: 700;
  margin: 0 0 22px;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.Contact-heading em { font-family: var(--font-display); font-weight: 600;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.Contact-rule {
  display: block;
  width: 64px;
  height: 2px;
  background: var(--brand-gradient);
  margin: 0 0 22px;
  border-radius: 2px;
}

.Contact-sub {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.6;
}

.ContactForm {
  background: var(--surface);
  border-radius: 28px;
  padding: 36px;
  box-shadow:
    14px 14px 32px var(--surface-lo),
    -10px -10px 28px var(--surface-hi);
}

.Contact-field {
  margin-bottom: 22px;
}

.Contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (width < 560px) {
  .Contact-row {
    grid-template-columns: 1fr;
  }
  .ContactForm {
    padding: 26px 22px;
    border-radius: 22px;
  }
}

.Contact-field > label {
  display: block;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--brass);
  margin-bottom: 10px;
}

.Contact-neu {
  position: relative;
  border-radius: 16px;
  background: var(--surface);
  box-shadow:
    inset 6px 6px 12px var(--surface-lo),
    inset -5px -5px 10px var(--surface-hi);
  transition: box-shadow 0.2s ease;
}

.Contact-neu:focus-within {
  box-shadow:
    inset 6px 6px 12px var(--surface-lo),
    inset -5px -5px 10px var(--surface-hi),
    0 0 0 2px rgba(178, 106, 70, 0.55);
}

.Contact-neu input,
.Contact-neu textarea,
.Contact-neu select {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 15px;
  padding: 16px 18px;
  border-radius: 16px;
}

.Contact-neu input::placeholder,
.Contact-neu textarea::placeholder {
  color: var(--text-secondary);
  opacity: 0.55;
}

.Contact-neu textarea {
  resize: vertical;
  min-height: 112px;
  line-height: 1.5;
}

.Contact-neu select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  color: var(--text-primary);
}

.Contact-neu select:invalid {
  color: var(--text-secondary);
}

.Contact-neu select option {
  background: var(--surface-alt);
  color: var(--text-primary);
}

.Contact-select-wrap {
  position: relative;
}

.Contact-select-wrap::after {
  content: '';
  position: absolute;
  right: 20px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--brand-light);
  border-bottom: 2px solid var(--brand-light);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

.Contact-submit {
  width: 100%;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--warm-black);
  padding: 18px 22px;
  border-radius: 16px;
  background: var(--brand-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow:
    7px 7px 16px var(--surface-lo),
    -4px -4px 12px var(--surface-hi);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.Contact-submit:hover {
  filter: brightness(1.06);
}

.Contact-submit:active {
  transform: translateY(1px);
  box-shadow:
    inset 4px 4px 10px var(--brand-dark),
    inset -3px -3px 8px rgba(255, 255, 255, 0.15);
}

.Contact-submit svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.Contact-status {
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--success);
  text-align: center;
  min-height: 18px;
}

/* =========================================================
   FAQ section — intro on the left, accordion on the right.
   Uses the same theme tokens as the rest of the page, so it
   follows the dark / light toggle automatically.
   ========================================================= */

.Faq-section {
  width: 100%;
  background: var(--surface);
  padding: 80px 24px 60px;
}

.Faq-wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.8fr 1.4fr;
  gap: 64px;
  align-items: start;
}

@media (width < 900px) {
  .Faq-wrap {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

.Faq-intro {
  max-width: 38ch;
}

@media (width >= 900px) {
  .Faq-intro {
    position: sticky;
    top: 32px;
  }
}

.Faq-eyebrow {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--brass);
  margin: 0 0 18px;
}

.Faq-heading {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(40px, 5vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 20px;
}

.Faq-heading em { color: var(--brand-light);
}

.Faq-rule {
  display: block;
  width: 60px;
  height: 2px;
  background: var(--brand-gradient);
  border-radius: 2px;
  margin: 0 0 22px;
}

.Faq-sub {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 28px;
  max-inline-size: none;
}

.Faq-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px;
  border-radius: 8px;
  background: var(--brand-gradient);
  color: var(--warm-black);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  text-decoration: none;
  box-shadow:
    7px 7px 16px var(--surface-lo),
    -4px -4px 12px var(--surface-hi);
  transition: filter 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.Faq-cta:hover {
  filter: brightness(1.06);
}

.Faq-cta:active {
  transform: translateY(1px);
  box-shadow:
    inset 4px 4px 10px var(--brand-dark),
    inset -3px -3px 8px rgba(255, 255, 255, 0.15);
}

.Faq-cta svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* --- Accordion --- */

/* Neumorphic: every card is the same colour as the page and is shaped
   only by a light and a dark shadow. Closed = raised, open = pressed in.
   Same shadow tokens as the enquiry form, so both follow the theme. */

.Faq-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 10px 10px 14px;
}

.Faq-item {
  background: var(--surface);
  border: none;
  border-radius: 20px;
  box-shadow:
    9px 9px 20px var(--surface-lo),
    -7px -7px 18px var(--surface-hi);
  transition: box-shadow 0.3s ease;
}

.Faq-item:hover {
  box-shadow:
    11px 11px 24px var(--surface-lo),
    -8px -8px 20px var(--surface-hi);
}

.Faq-item.is-open,
.Faq-item.is-open:hover {
  box-shadow:
    inset 7px 7px 14px var(--surface-lo),
    inset -6px -6px 12px var(--surface-hi);
}

.Faq-q {
  margin: 0;
  max-inline-size: none;
  font-size: inherit;
}

.Faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 28px;
  background: transparent;
  border: none;
  border-radius: 20px;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}

.Faq-trigger:focus-visible {
  outline: 2px solid var(--brand-light);
  outline-offset: -2px;
}

/* Round raised button with a plus; when the card opens the button is
   pressed in and the plus turns into a cross */
.Faq-icon {
  position: relative;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: var(--surface);
  box-shadow:
    4px 4px 9px var(--surface-lo),
    -3px -3px 8px var(--surface-hi);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.Faq-icon::before,
.Faq-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-light);
  transform: translate(-50%, -50%);
  transition: background 0.25s ease;
}

.Faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.Faq-item.is-open .Faq-icon {
  transform: rotate(45deg);
  box-shadow:
    inset 3px 3px 6px var(--surface-lo),
    inset -2px -2px 5px var(--surface-hi);
}

.Faq-item.is-open .Faq-icon::before,
.Faq-item.is-open .Faq-icon::after {
  background: var(--brand);
}

/* Smooth open / close without knowing the answer's height */
.Faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}

.Faq-item.is-open .Faq-panel {
  grid-template-rows: 1fr;
}

.Faq-panel-inner {
  overflow: hidden;
}

.Faq-panel-inner p {
  margin: 0;
  padding: 0 28px 26px;
  max-inline-size: 62ch;
  font-family: var(--font-display);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-secondary);
}

@media (width < 560px) {
  .Faq-section {
    padding: 56px 16px 40px;
  }
  .Faq-trigger {
    padding: 20px 18px;
    font-size: 16px;
  }
  .Faq-panel-inner p {
    padding: 0 18px 20px;
  }
}

/* =========================================================
   Typography — rounded geometric style (matches the logo)
   Comfortaa is the closest free font to the logo lettering.
   Text keeps the case it is written in (only the first letters capital),
   with a little extra letter-spacing for the airy, rounded look.
   ========================================================= */

body,
button,
input,
select,
textarea,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

body {
  letter-spacing: 0.02em;
}

/* Comfortaa has no italic — keep the accent colour, drop the fake slant */
em {
  font-style: normal;
}

.NavLinkTitle {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.services-intro h1,
.Contact-heading,
.Faq-heading {
  font-weight: 500;
  letter-spacing: 0.03em;
}

.Faq-trigger > span:first-child {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* =========================================================
   Navbar spacing — logo and phone number reach the edges
   The inner wrapper (.content-3 utility) was capped to a centred max width,
   which pushed the logo in from the left. Let it fill the navbar instead;
   the gap from the screen edge is now just the navbar padding below.
   ========================================================= */

.Navbar {
  padding-inline: clamp(16px, 3vw, 48px);   /* <- change this to move the logo closer to / further from the left edge */
}

.Navbar > .content-3 {
  inline-size: 100%;
  max-inline-size: none;
  margin-inline: 0;
}

/* =========================================================
   Phone number in the navbar (plain text link, no button)
   ========================================================= */

.NavPhone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.2s ease;
}

.NavPhone i {
  color: var(--brand-light);
  font-size: 1.1rem;
}

.NavPhone:hover,
.NavPhone:focus-visible {
  color: var(--brand-light);
}

@media (width < 480px) {
  .NavPhone {
    font-size: 0.8rem;
    gap: 6px;
  }
}

/* =========================================================
   Responsive navbar — hamburger menu below 1024px
   (replaces the old fixed bottom icon bar). The navbar stays pinned to the top on small
   screens so the hamburger is always reachable. Same dark look in both themes.
   ========================================================= */

.Hamburger {
  display: none;
}

@media (width < 1024px) {
  /* keep the navbar on screen while scrolling */
  .Navbar {
    position: sticky;
    top: 0;
    z-index: 900;
  }

  /* the hero now starts under the sticky navbar */
  .ScrollIntro-sticky {
    top: var(--nav-block-size);
    height: calc(100vh - var(--nav-block-size));
    height: calc(100svh - var(--nav-block-size));
  }

  /* the hint no longer has to clear a bottom bar */
  .ScrollIntro-hint {
    bottom: 28px;
  }

  .Hamburger {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
    border: 1px solid rgba(251, 248, 241, 0.16);
    border-radius: 12px;
    background: rgba(251, 248, 241, 0.06);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
  }

  .Hamburger:hover,
  .Hamburger[aria-expanded="true"] {
    background: rgba(206, 128, 88, 0.2);
    border-color: rgba(206, 128, 88, 0.5);
  }

  .Hamburger span {
    display: block;
    inline-size: 20px;
    block-size: 2px;
    border-radius: 2px;
    background: var(--warm-white);
    transition: transform 0.3s ease, opacity 0.2s ease;
  }

  .Hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .Hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .Hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* the menu becomes a dropdown panel under the navbar */
  .Navbar .Menu {
    position: fixed;
    inset-block: var(--nav-block-size) auto;
    inset-inline: 0;
    block-size: auto;
    max-block-size: calc(100vh - var(--nav-block-size));
    max-block-size: calc(100dvh - var(--nav-block-size));
    overflow-x: hidden;
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 8px 12px 14px;
    background-color: var(--warm-black);
    border-top: 0;
    border-bottom: 1px solid var(--neutral-700);
    box-shadow: 0 22px 40px rgba(0, 0, 0, 0.45);
    z-index: 899;

    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
  }

  .Navbar .Menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .Navbar .NavItem {
    block-size: auto;
    inline-size: 100%;
    border-bottom: 1px solid rgba(251, 248, 241, 0.07);
  }

  .Navbar .NavItem:last-child {
    border-bottom: 0;
  }

  .Navbar .NavLink {
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    inline-size: 100%;
    block-size: auto;
    padding: 16px 12px;
    border-radius: 10px;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .Navbar .NavLink:hover,
  .Navbar .NavLink:focus-visible {
    background: rgba(206, 128, 88, 0.14);
    color: var(--brand-light);
    text-decoration: none;
  }

  /* show icon AND label in the dropdown (they were swapped by screen width before) */
  .Navbar .NavLinkTitle {
    display: inline;
    font-size: 1rem;
    order: 2;
  }

  .Navbar .NavIcon {
    display: inline-flex;
    order: 1;
    color: var(--brand-light);
    font-size: 1.3rem;
  }
}

@media (width < 480px) {
  .Navbar .inline-center-center.gap-3 {
    gap: 8px;
  }
}

/* =========================================================
   Services book — compact on phones
   The book was built for a wide screen and stayed huge on mobile (big photo, big text,
   760px tall page, tabs wrapping onto 3 rows). Everything below only applies to
   screens 600px wide or less.
   ========================================================= */

@media (max-width: 600px) {
  .Book-showcase-section {
    padding: 0 10px;
    margin: 24px auto 56px;
  }

  .Book-container {
    gap: 16px;
  }

  /* title + chapter tabs: one scrollable row instead of three wrapped rows */
  .Book-topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 0 2px;
  }

  .Book-label {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    gap: 8px;
  }

  .Book-label i {
    font-size: 1.05rem;
  }

  .Book-chapter-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .Book-chapter-list::-webkit-scrollbar {
    display: none;
  }

  .chapter-tab {
    flex: 0 0 auto;
    padding: 5px 12px;
    font-size: 0.72rem;
    white-space: nowrap;
  }

  /* the book itself */
  .Book {
    padding: 8px;
  }

  .Book-content {
    min-height: 0;
    padding: 14px 16px 44px;
  }

  .Book .Book-content {
    min-height: 540px;
  }

  .Book-photo--inline {
    height: 150px;
    margin-bottom: 12px;
  }

  .Book-photo img {
    outline-width: 4px;
  }

  .Book-badge {
    top: 10px;
    left: 10px;
    padding: 5px 10px;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
  }

  .Book .book-page-header {
    margin-bottom: 2px;
  }

  .Book .book-service-no {
    font-size: 0.66rem;
    letter-spacing: 0.1em;
  }

  .Book .book-guarantee {
    font-size: 0.68rem;
    gap: 4px;
  }

  .Book .book-title {
    font-size: 1.3rem;
    margin: 8px 0 8px;
  }

  .Book .book-rule {
    margin-bottom: 10px;
  }

  .Book .book-desc {
    font-size: 0.82rem;
    line-height: 1.55;
    letter-spacing: 0.01em;
    margin: 0 0 12px;
  }

  .Book .book-features-block {
    margin-bottom: 12px;
  }

  .Book .book-features-head {
    font-size: 0.68rem;
    margin-bottom: 6px;
  }

  .Book .book-features-list {
    gap: 5px;
  }

  .Book .book-features-list li {
    font-size: 0.78rem;
    line-height: 1.35;
    gap: 8px;
    letter-spacing: 0.01em;
  }

  .Book .book-features-list li i {
    font-size: 0.95rem;
  }

  /* enquire button and arrows share one row again */
  .Book .book-action-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 12px;
  }

  .Book .book-enquire-btn {
    padding: 10px 16px;
    font-size: 0.78rem;
    gap: 6px;
    justify-content: center;
  }

  .Book .Book-controls {
    justify-content: flex-end;
    gap: 8px;
  }

  .Book-nav {
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
  }

  .Book-folio {
    bottom: 14px;
    font-size: 0.6rem;
  }

  .Book-page--right .Book-folio,
  .Book-leaf-front .Book-folio {
    left: 16px;
    right: 16px;
  }

  /* the "keys" hint makes no sense on a phone */
  .Book-footer-indicator {
    display: none;
  }
}

@media (max-width: 600px) {
  .Book .Book-leaf-front .Book-content {
    min-height: 0;
  }
}

/* Fix: the sideways-scrolling chapter tabs were widening the whole page on phones.
   A wrapping flex container sizes its line to the widest child, so the tab row has to be
   held to the panel width explicitly. */
@media (max-width: 600px) {
  .Book-container,
  .Book-topbar {
    min-width: 0;
    max-width: 100%;
  }

  .Book-topbar {
    flex-wrap: nowrap;
  }

  .Book-chapter-list {
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
    box-sizing: border-box;
  }
}

/* =========================================================
   Navbar fit on phones
   The logo was rendering at its full size and pushed the phone number / hamburger buttons off the
   right edge, so the page had to be scrolled sideways to reach the menu.
   The logo now takes whatever space is left and shrinks; the buttons never shrink.
   ========================================================= */

@media (width < 1024px) {
  html, body {
    overflow-x: clip;               /* no accidental sideways scroll (does not break sticky) */
  }

  .Navbar > .content-3 {
    gap: 10px;
    min-inline-size: 0;
  }

  .Navbar .Logo {
    flex: 1 1 0;
    inline-size: auto;
    min-inline-size: 0;
    align-items: flex-start;
    justify-content: center;
  }

  .Navbar .Logo img {
    display: block;
    inline-size: auto;
    block-size: auto;
    max-inline-size: 100%;
    max-block-size: 38px;
    object-fit: contain;
    object-position: left center;
  }

  .Navbar .inline-center-center.gap-3 {
    flex: 0 0 auto;
    gap: 10px;
  }
}

@media (width < 480px) {
  .Navbar {
    padding-inline: 12px;
  }

  .Navbar .Logo img {
    max-block-size: 30px;
  }

  .Hamburger {
    inline-size: 40px;
    block-size: 40px;
  }
}
@media (width < 1024px) {
  .Navbar .Logo {
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    block-size: auto;
    margin: 0;
  }

  .Navbar .Logo img {
    margin: 0;
    object-position: left center;
  }
}

/* =========================================================
   Menu alignment
   - Phones / small tablets (< 1024px): every item is one row, icon on the left, label on the
     right, all left-aligned on the same line, labels never wrap.
   - Desktop (>= 1024px): labels on one line, evenly spaced, vertically centred.
   ========================================================= */

.Navbar .NavLinkTitle {
  white-space: nowrap;
}

@media (width < 1024px) {
  .Navbar .NavItem,
  .Navbar .NavLink {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
  }

  .Navbar .NavLink {
    flex-direction: row;
    gap: 14px;
  }

  .Navbar .NavIcon {
    flex: 0 0 28px;
    inline-size: 28px;
    justify-content: center;
    align-items: center;
    line-height: 1;
  }

  .Navbar .NavLinkTitle {
    flex: 1 1 auto;
    text-align: left;
    line-height: 1.2;
  }
}

@media (width >= 1024px) {
  .Navbar .Menu {
    align-items: center;
    gap: 4px;
  }

  .Navbar .NavItem,
  .Navbar .NavLink {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* =========================================================
   Our Process — a winding path from the first call to handover.
   Desktop: the path is drawn as you scroll and each stop appears when the path reaches it.
   Phones (< 900px): the same steps become a simple vertical timeline.
   ========================================================= */

.Journey {
  width: 100%;
  padding: 90px 0 80px;
  overflow-x: clip;
}

.Journey-stage {
  --badge: clamp(54px, 7.2cqw, 88px);
  position: relative;
  container-type: inline-size;
  width: min(1200px, 100% - 32px);
  margin: 0 auto;
  aspect-ratio: 1200 / 2100;
}

.Journey-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.Journey-track,
.Journey-draw {
  stroke-width: 26;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: none;
}

.Journey-track {
  stroke: var(--brand);
  stroke-opacity: 0.2;
}

.Journey-draw {
  stroke: var(--brand);
}

.Journey-line {
  display: none;
}

.Journey-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---- desktop: steps sit on the path ---- */
.Journey-step {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 0%);
  width: 0;
  height: 0;
  max-inline-size: none;
}

.Journey-badge {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--badge);
  height: var(--badge);
  transform: translate(-50%, -50%) rotate(-8deg) scale(0.4);
  display: grid;
  place-items: center;
  font-size: calc(var(--badge) * 0.5);
  color: var(--brand-dark);
  background: var(--clay-tint, #F6E7DE);
  border: 3px solid var(--brand);
  border-radius: 24%;
  box-shadow: 0 10px 22px rgba(178, 106, 70, 0.35), 0 0 0 7px rgba(178, 106, 70, 0.14);
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease;
  z-index: 2;
}

.Journey-step:nth-child(even) .Journey-badge {
  transform: translate(-50%, -50%) rotate(7deg) scale(0.4);
}

.Journey-step.is-in .Journey-badge {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-8deg) scale(1);
}

.Journey-step:nth-child(even).is-in .Journey-badge {
  transform: translate(-50%, -50%) rotate(7deg) scale(1);
}

.Journey-text {
  position: absolute;
  width: max-content;
  max-width: 34cqw;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease 0.1s, transform 0.6s ease 0.1s;
  z-index: 1;
}

.Journey-step.is-in .Journey-text {
  opacity: 1;
  transform: translateY(0);
}

/* Where each step's text sits relative to its badge.
   --dx / --dy (set per step in the HTML, in cqw) fine-tune the position so the text
   never touches the line or another step. */
.Journey-step.pos-r .Journey-text {
  left: calc(var(--badge) / 2 + 1.4cqw);
  top: 0;
  translate: var(--dx, 0cqw) calc(-50% + var(--dy, 0cqw));
}

.Journey-step.pos-l .Journey-text {
  right: calc(var(--badge) / 2 + 1.4cqw);
  top: 0;
  translate: var(--dx, 0cqw) calc(-50% + var(--dy, 0cqw));
  text-align: left;
}

.Journey-step.pos-b .Journey-text {
  left: calc(var(--badge) / -2);
  top: calc(var(--badge) / 2 + 0.8cqw);
  translate: var(--dx, 0cqw) var(--dy, 0cqw);
}

.Journey-step.pos-bl .Journey-text {
  right: calc(var(--badge) / -2);
  top: calc(var(--badge) / 2 + 0.8cqw);
  text-align: left;
  translate: var(--dx, 0cqw) var(--dy, 0cqw);
}

.Journey-no {
  display: block;
  margin-bottom: 0.2cqw;
  font-size: clamp(0.6rem, 1.15cqw, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.Journey-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3.8cqw, 3.2rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--brand-light);
  max-inline-size: none;
}

.Journey-pill {
  margin: 0.8cqw 0 0;
  padding: 0.9cqw 1.5cqw;
  width: 0;              /* box text block ko chaudha nahi karta */
  min-width: 100%;       /* upar ke label/title ki poori width leta hai */
  max-inline-size: none;
  font-size: clamp(0.66rem, 1.3cqw, 0.95rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--text-primary);
  background: var(--surface-alt);
  border: 1.5px solid var(--brand);
  border-radius: 2.2cqw;
  transform: none;       /* tilt hata diya */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  text-align: left;
}

.Journey,
.Journey *,
.Journey *::before,
.Journey *::after {
  box-sizing: border-box;
}

/* ---- phones and small tablets: vertical timeline ---- */
@media (width < 900px) {
  .Journey {
    padding-bottom: 56px;
  }

  .Journey-stage {
    container-type: normal;
    aspect-ratio: auto;
    width: 100%;
    padding: 8px 20px 0;
  }

  .Journey-svg {
    display: none;
  }

  .Journey-line {
    display: block;
    position: absolute;
    left: 43px;
    top: 36px;
    bottom: 40px;
    width: 4px;
    border-radius: 4px;
    background: rgba(178, 106, 70, 0.2);
    overflow: hidden;
  }

  .Journey-line span {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--brand);
    transform-origin: top;
    transform: scaleY(0);
  }

  .Journey-steps {
    position: relative;
    padding-left: 70px;
  }

  .Journey-step {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    padding-bottom: 34px;
  }

  .Journey-step:last-child {
    padding-bottom: 0;
  }

  .Journey-badge {
    --badge: 50px;
    left: -70px;
    top: 0;
    width: 50px;
    height: 50px;
    font-size: 1.4rem;
    transform: rotate(-8deg) scale(0.5);
  }

  .Journey-step:nth-child(even) .Journey-badge {
    transform: rotate(7deg) scale(0.5);
  }

  .Journey-step.is-in .Journey-badge {
    transform: rotate(-8deg) scale(1);
  }

  .Journey-step:nth-child(even).is-in .Journey-badge {
    transform: rotate(7deg) scale(1);
  }

  .Journey-step .Journey-text,
  .Journey-step.pos-r .Journey-text,
  .Journey-step.pos-l .Journey-text,
  .Journey-step.pos-b .Journey-text,
  .Journey-step.pos-bl .Journey-text {
    position: static;
    translate: none;
    width: auto;
    max-width: none;
    text-align: left;
  }

  .Journey-no {
    font-size: 0.68rem;
    margin-bottom: 2px;
  }

  .Journey-title {
    font-size: 1.55rem;
  }

  .Journey-pill,
  .Journey-step.pos-l .Journey-pill,
  .Journey-step.pos-bl .Journey-pill {
    width: auto;
    margin: 10px 0 0;
    padding: 12px 16px;
    font-size: 0.86rem;
    border-radius: 18px;
    transform: rotate(-1.5deg);
    transform-origin: left center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .Journey-badge,
  .Journey-text {
    transition: none;
  }
}

/* =========================================================
   Mobile menu: items stacked one below the other
   ========================================================= */

@media (width < 1024px) {
  .Navbar .Menu {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow-x: hidden;
  }

  .Navbar .Menu .NavItem {
    display: flex;
    flex: 0 0 auto;
    inline-size: 100%;
    block-size: auto;
  }

  .Navbar .Menu .NavLink {
    inline-size: 100%;
    justify-content: flex-start;
  }
}

/* =========================================================
   Hero door on phones: always visible, small, bottom-right
   (overrides the old rule that hid it on short screens)
   ========================================================= */

@media (width < 900px) {
  .Hero-art {
    display: grid !important;
    position: absolute;
    right: 22px;
    bottom: 0;
  }

  .Hero-arch {
    width: clamp(84px, 28vw, 140px);
    border-width: 8px;
  }
}

/* =========================================================
   Phones: scroll hint centred, door smaller so they never overlap
   ========================================================= */

@media (width < 900px) {
  .ScrollIntro .ScrollIntro-hint {
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
    text-align: center;
  }

  .ScrollIntro-backdrop .Hero-art {
    display: grid !important;
    position: absolute;
    right: 16px;
    bottom: 0;
    z-index: 2;
  }

  .ScrollIntro-backdrop .Hero-arch {
    width: clamp(70px, 20vw, 110px);
    border-width: 7px;
  }
}

/* =========================================================
   Bigger navbar text on desktop / laptop
   ========================================================= */

@media (width >= 1024px) {
  .Navbar .NavLinkTitle {
    font-size: 20px;
  }

  .Navbar .NavPhone {
    font-size: 1.15rem;
  }

  .Navbar .NavPhone i {
    font-size: 1.3rem;
  }
}

/* tablets: slightly bigger phone number too */
@media (width >= 480px) and (width < 1024px) {
  .Navbar .NavPhone {
    font-size: 1.05rem;
  }
}
/* =========================================================
   Floating WhatsApp button (bottom-right, always visible)
   ========================================================= */

.WhatsApp-float {
  position: fixed;
  right: clamp(16px, 2.5vw, 28px);
  bottom: clamp(16px, 2.5vw, 28px);
  z-index: 1000;
  inline-size: 58px;
  block-size: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  font-size: 32px;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.WhatsApp-float::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  z-index: -1;
  animation: whatsapp-pulse 2.2s ease-out infinite;
}

.WhatsApp-float:hover,
.WhatsApp-float:focus-visible {
  transform: scale(1.08);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
}

@keyframes whatsapp-pulse {
  0%   { transform: scale(1);   opacity: 0.5; }
  100% { transform: scale(1.6); opacity: 0; }
}

@media (width < 480px) {
  .WhatsApp-float {
    inline-size: 52px;
    block-size: 52px;
    font-size: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .WhatsApp-float::before {
    animation: none;
  }
}
/* =========================================================
   Brand lockup: Raya Spaces | Livspace (associate partner)
   ========================================================= */

.Brand-lockup {
  --brand-gap: 14px;
  --partner-pull: 0px;
  --partner-h: 40px;

  display: flex;
  align-items: center;      /* both logos share the same centre line */
  gap: var(--brand-gap);
  min-inline-size: 0;
}

.Brand-divider {
  display: block;
  flex: 0 0 auto;
  inline-size: 1px;
  block-size: 46px;
  background: linear-gradient(to bottom, transparent, rgba(206, 128, 88, 0.75), transparent);
}

/* Images/livspace-associate-partner.png is cropped tight with a transparent background,
   so it sits cleanly next to the line with no blend trick */
.Brand-partner-logo {
  display: block;
  flex: 0 1 auto;
  block-size: var(--partner-h);
  inline-size: auto;
  max-inline-size: 100%;
  min-inline-size: 0;
  margin-inline-start: var(--partner-pull);
  object-fit: contain;
}

/* ---- Mobile / tablet (< 1024px) ---- */
@media (width < 1024px) {
  .Brand-lockup {
    --brand-gap: 10px;
    --partner-pull: 0px;
    --partner-h: 34px;
    flex: 1 1 auto;         /* take the free space, shrink if the screen is tight */
    min-inline-size: 0;
    overflow: hidden;
  }

  /* the old rule gave the Raya logo flex: 1 1 0, which would shove the Livspace logo to the far right */
  .Navbar .Brand-lockup .Logo {
    flex: 0 1 auto;
    inline-size: auto;
    min-inline-size: 0;
  }

  .Brand-divider {
    block-size: 30px;
  }
}

/* ---- Phones (< 480px) ---- */
@media (width < 480px) {
  .Brand-lockup {
    --brand-gap: 8px;
    --partner-pull: 0px;
    --partner-h: 26px;
  }

  .Brand-divider {
    block-size: 24px;
  }
}

/* ---- Small phones (< 400px): phone number becomes just the call icon so everything fits ---- */
@media (width < 400px) {
  .Brand-lockup {
    --partner-h: 22px;
  }

  .Navbar .NavPhone span {
    display: none;
  }

  .Navbar .NavPhone i {
    font-size: 1.35rem;
  }
}

/* =========================================================
   Our Process: a house drawn in the left margin. Hidden on phones.
   ========================================================= */

.Journey-house {
  position: absolute;
  /* LEFT POSITION: more negative = further left, 0 = inside the section edge */
  left: -11cqw;
  top: 0;
  bottom: 0;
  width: clamp(150px, 17cqw, 230px);
  color: var(--brand-light);
  pointer-events: none;
  z-index: 0;
}

.Journey-house-inner {
  position: sticky;
  top: 26vh;
  opacity: 0.3;
}

.Journey-house svg {
  display: block;
  width: 100%;
  height: auto;
}

/* line parts draw themselves */
.Journey-house .hs path,
.Journey-house .hs circle {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.2s ease;
}

.Journey-house .hs.is-on path,
.Journey-house .hs.is-on circle {
  stroke-dashoffset: 0;
}

/* parts that fade in instead of drawing */
.Journey-house .hs-ghost,
.Journey-house .hs-paint,
.Journey-house .hs-glow {
  opacity: 0;
  transition: opacity 1.2s ease;
}

.Journey-house .hs-ghost path,
.Journey-house .hs-ghost circle {
  stroke-dasharray: 3 4;
  stroke-dashoffset: 0;
  transition: none;
}

.Journey-house .hs-ghost.is-on { opacity: 0.55; }
.Journey-house .hs-paint.is-on { opacity: 1; }
.Journey-house .hs-glow.is-on  { opacity: 1; }

/* fill-only shapes have no stroke to draw */
.Journey-house .hs-paint path,
.Journey-house .hs-glow circle[fill] {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
}

@media (width < 900px) {
  .Journey-house {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .Journey-house .hs path,
  .Journey-house .hs circle,
  .Journey-house .hs-ghost,
  .Journey-house .hs-paint,
  .Journey-house .hs-glow {
    transition: none;
  }
}
/* =========================================================
   Services book on mobile: every page the same height
   The right page now has a height set from the longest service (measured in index.html),
   so Prev / Next never makes the book grow or shrink. Mobile and tablet only (< 900px).
   ========================================================= */

@media (max-width: 900px) {
  .Book .Book-page--right .Book-content {
    min-height: var(--book-h, 540px);
  }

  .Book-measure {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: -1;
  }

  .Book .Book-measure .Book-content {
    min-height: 0;
  }
}

@media (min-width: 901px) {
  .Book-measure {
    display: none;
  }
}


/* =========================================================
   Navbar phone number: plain text on desktop (not clickable),
   still a tap-to-call link on phones / tablets (< 1024px)
   ========================================================= */

@media (width >= 1024px) {
  .Navbar .NavPhone,
  .Navbar .NavPhone:hover,
  .Navbar .NavPhone:focus-visible {
    pointer-events: none;      /* no click, no hover effect */
    cursor: default;
    color: var(--text-primary);
  }
}


/* =========================================================
   Footer map: square (1:1), sits in the first footer column
   right under the contact details (phone / email / address).
   The map is darkened to match the dark footer; hover (or tap) brings the real colours back.
   The whole map is clickable: a transparent link (.Footer-map-link) is laid over the iframe,
   because an iframe would otherwise swallow the click. Click opens Raya Spaces on Google Maps.
   ========================================================= */

.Footer-map {
  position: relative;
  margin-top: var(--map-drop, 50px);   /* <- map ko upar/neeche karne ke liye: address ki line se align karo */
  margin-bottom: 0;
  inline-size: 100%;
  max-inline-size: 150px;               /* <- map ka size */
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(206, 128, 88, 0.45);
  background: var(--surface-alt);
  box-shadow:
    7px 7px 16px var(--surface-lo),
    -4px -4px 12px var(--surface-hi);
}

.Footer-map iframe {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  display: block;
  pointer-events: none;      /* clicks go to the overlay link instead of the iframe */
  filter: invert(92%) hue-rotate(180deg) grayscale(0.35) contrast(0.95);
  transition: filter 0.4s ease;
}

/* colour wapas sirf un devices pe jahan real hover hota hai (laptop); phone pe map dark hi rahe */
@media (hover: hover) {
  .Footer-map:hover iframe,
  .Footer-map:focus-within iframe {
    filter: none;
  }
}

/* transparent overlay that makes the whole map clickable */
.Footer-map-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: pointer;
}

/* tablet / phone: footer becomes 2 columns, so the map just sits under the links */
@media (width < 980px) {
  .Footer-map {
    --map-drop: 22px;
    max-inline-size: 170px;
  }
}

@media (width < 560px) {
  /* phone: map just sits under the address */
  .Footer-map {
    --map-drop: 0px;
    max-inline-size: 150px;
    margin: 4px 0 20px;
  }
}