@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

   *{
    padding: 0; margin: 0;
   }

   @font-face {
    font-family: 'Helvetica';
    font-style: normal;
    font-weight: normal;
    src: local('Helvetica'), url('../fonts/Helvetica.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Helvetica Oblique';
    font-style: normal;
    font-weight: normal;
    src: local('Helvetica Oblique'), url('../fonts/Helvetica-Oblique.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Helvetica Compressed';
    font-style: normal;
    font-weight: normal;
    src: local('Helvetica Compressed'), url('../fonts/helvetica-compressed-5871d14b6903a.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Helvetica Rounded Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Helvetica Rounded Bold'), url('../fonts/helvetica-rounded-bold-5871d05ead8de.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Helvetica bold';
    font-style: normal;
    font-weight: normal;
    src: local('Helvetica'), url('../fonts/Helvetica-Bold.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Helvetica Bold Oblique';
    font-style: normal;
    font-weight: normal;
    src: local('Helvetica Bold Oblique'), url('../fonts/Helvetica-BoldOblique.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Helvetica Light';
    font-style: normal;
    font-weight: normal;
    src: local('Helvetica Light'), url('../fonts/helvetica-light-587ebe5a59211.woff') format('woff');
    }

    /* Figtree — the site's body / UI typeface. Self-hosted variable font
       (one file covers weights 300–900). Previously the CSS asked for "Figtree"
       everywhere but the font was never loaded, so all body text silently fell
       back to the system sans-serif. font-display:swap keeps text visible while
       it loads. */
    @font-face {
        font-family: 'Figtree';
        font-style: normal;
        font-weight: 300 900;
        font-display: swap;
        src: url('../fonts/figtree/figtree-latin-ext.woff2') format('woff2');
        unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
        font-family: 'Figtree';
        font-style: normal;
        font-weight: 300 900;
        font-display: swap;
        src: url('../fonts/figtree/figtree-latin.woff2') format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

  body{
    background-color: #FFFFFF!important;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Helvetica bold';
 }

/* =========================================================
   GLOBAL TYPOGRAPHY SCALE (hardened, tag-based)
   Every heading + paragraph is sized/weighted by its tag.
   Mobile-first; desktop values apply at >= 1024px.
   Weights: H1=600, H2/H3=500, everything else=400.
   Font: all headings = Helvetica (Helvetica bold).
   ========================================================= */
h1 { font-size: 28px !important; line-height: 1.2 !important;  font-weight: 600 !important; font-family: 'Helvetica bold', 'Helvetica', sans-serif !important; }
h2 { font-size: 24px !important; line-height: 1.25 !important; font-weight: 500 !important; font-family: 'Helvetica bold', 'Helvetica', sans-serif !important; }
h3 { font-size: clamp(17px, 13.8px + 0.8vw, 22px) !important; line-height: 1.3 !important;  font-weight: 500 !important; }
h4 { font-size: 18px !important; line-height: 1.4 !important;  font-weight: 400 !important; }
h5 { font-size: 16px !important; line-height: 1.4 !important;  font-weight: 400 !important; }
h6 { font-size: 14px !important; line-height: 1.4 !important;  font-weight: 400 !important; }
p  { font-size: 16px !important; line-height: 1.55 !important; font-weight: 400 !important; }
small, .caption { font-size: 13px !important; line-height: 1.4 !important; font-weight: 400 !important; }

@media (min-width: 1024px) {
  h1 { font-size: 38px !important; line-height: 1.15 !important; }
  h2 { font-size: 28px !important; line-height: 1.25 !important; }
  h3 { font-size: clamp(17px, 13.8px + 0.8vw, 22px) !important; line-height: 1.3 !important; }
  h4 { font-size: 18px !important; line-height: 1.4 !important; }
  h5 { font-size: 18px !important; line-height: 1.4 !important; }
  h6 { font-size: 18px !important; line-height: 1.4 !important; }
  p  { font-size: 16px !important; line-height: 1.6 !important; }
  small, .caption { font-size: 14px !important; }
}

/* Section headlines — same Helvetica as every other heading on the site. */
.section-heading {
  font-family: 'Helvetica bold', 'Helvetica', sans-serif !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}

/* =========================================================
   GLOBAL FONT FAMILY LOCK
   Headings  -> Helvetica.   Body/paragraph text -> Figtree (sans-serif).
   Enforced so no page can drift to another family.
   ========================================================= */
h1, h2, h3, h4, h5, h6,
.section-heading,
.text-playfair-display,
.text-heading {
  font-family: 'Helvetica bold', 'Helvetica', sans-serif !important;
}
body, p, li, td, th, span, a, label, input, textarea, select, button, small {
  font-family: "Figtree", sans-serif;
}

/* =========================================================
   GLOBAL TEXT COLOUR — deliberately NOT set on h1-h6 / p.
   ---------------------------------------------------------------------------
   A tempting rule like `body p { color: #4C4C4C }` looks safe because its
   specificity (0,0,2) loses to a .text-white utility. It is not safe: most
   sections here put text-white on a WRAPPER and let the heading and paragraph
   inherit it. A direct rule on an element always beats an inherited value, at
   any specificity, so such a rule turns every caption over an image, every
   dark hero band and the navy contact form dark-on-dark.

   Body colour therefore stays with the element or its wrapper, which is how
   this codebase already expresses it.
   ========================================================= */

/* Form validation messages. Previously an inline style={{color:"red"}} on
   seven spans; #FE2C2C is the red already used elsewhere on the site. */
.form-error {
  display: inline-block;
  margin-top: 4px;
  font-size: 13px;
  color: #FE2C2C;
}

/* Instagram handle accent in the home video slider (was inline). */
.insta-accent { color: #D300C5; }

/* =========================================================
   GLOBAL VERTICAL RHYTHM
   One consistent gap between a headline and the paragraph that follows it,
   on every page and inside every rich-text block (product, blog, FAQ, legal).
   --kk-gap is the single source of truth.
   ========================================================= */
:root {
  --kk-gap: 16px;        /* gap between paragraphs / blocks   */
  --kk-gap-tight: 8px;   /* gap between a heading and its text */
}
@media (min-width: 1024px) {
  :root { --kk-gap: 20px; --kk-gap-tight: 10px; }
}

/* A heading belongs to the text beneath it, so it sits close to it.
   ---------------------------------------------------------------------------
   These are DEFAULTS, not locks. They are deliberately NOT !important: an
   explicit margin utility written on a specific element is a design decision
   and has to win. The `body ` prefix lifts them to specificity (0,0,2), which
   still beats Tailwind's preflight reset (`p { margin: 0 }`, (0,0,1)) but loses
   to any utility class such as .mb-\[40px\] (0,1,0).

   Uniform spacing where it actually matters — CMS rich text — is enforced
   separately by the .blog-content / .faq-content / .product-content /
   .legal-content rules further down, which keep their !important. */
body h1, body h2, body h3, body h4, body h5, body h6 { margin-top: 0; margin-bottom: var(--kk-gap-tight); }
body p                                               { margin-top: 0; margin-bottom: var(--kk-gap); }

/* A heading directly after text needs breathing room above it */
body p + h1, body p + h2, body p + h3, body p + h4, body p + h5, body p + h6,
body ul + h1, body ul + h2, body ul + h3, body ul + h4, body ul + h5, body ul + h6,
body ol + h1, body ol + h2, body ol + h3, body ol + h4, body ol + h5, body ol + h6 {
  margin-top: calc(var(--kk-gap) * 1.5);
}

/* Centred section intro — a headline plus a one-line tagline sitting above a
   two-column block. This is a section header, not body copy, so it needs real
   separation from the block beneath it. The rhythm rule above is !important and
   would otherwise clamp a Tailwind mb-* utility here down to --kk-gap. */
.section-intro > p:last-child { margin-bottom: 40px !important; }
@media (min-width: 1024px) {
  .section-intro > p:last-child { margin-bottom: 65px !important; }
}

/* =========================================================
   TRUST CARD — the four supporting points on the hospitality page
   ========================================================= */
.trust-card {
  border: 1px solid #EAEAEC;
  box-shadow: 0 1px 2px rgba(30, 30, 49, .04);
  transition: box-shadow .35s ease, transform .35s ease, border-color .35s ease;
}
.trust-card:hover {
  border-color: #DCDCDE;
  box-shadow: 0 22px 46px -22px rgba(30, 30, 49, .32);
  transform: translateY(-6px);
}

/* Icon badge — solid brand navy, square to match the site's buttons/cards. */
.trust-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  background: #1E1E31;
  color: #FFFFFF;
  margin-bottom: 22px;
  transition: transform .35s ease;
}
.trust-card-icon svg { width: 24px; height: 24px; display: block; }
.trust-card:hover .trust-card-icon { transform: scale(1.06); }

/* Card title.
   font-weight is forced because the global scale sets h4 to 400 !important,
   which a Tailwind font-bold utility cannot beat. */
.trust-card h4 {
  font-weight: 700 !important;
  line-height: 1.35 !important;
  padding-bottom: 14px;
  margin-bottom: 14px !important;
  border-bottom: 1px solid #EDEDEF;
}
/* Description fills the remaining height so every card ends level. */
.trust-card p { margin-bottom: 0 !important; }

@media (min-width: 1024px) {
  .trust-card-icon { width: 56px; height: 56px; }
  .trust-card-icon svg { width: 26px; height: 26px; }
  /* Reserve two lines for the title so the copy starts on the same baseline in
     every card, whether the title wraps to one line or two. */
  .trust-card h4 { min-height: calc((18px * 1.35 * 2) + 14px); }
}

/* =========================================================
   GLOBAL LISTS (ul / ol / li)
   Bullets and numbers are indented from the left, and list text matches
   paragraph size exactly. Navigation/footer/utility lists are excluded.
   ========================================================= */
ul, ol {
  margin: 0 0 var(--kk-gap);
  padding-left: 26px;
  list-style-position: outside;
}
ul { list-style: disc; }
ol { list-style: decimal; }
ul ul { list-style: circle; }
ul ul, ol ol, ul ol, ol ul {
  margin: 6px 0 6px;
  padding-left: 22px;
}

/* List text = paragraph text (size, weight, leading) */
li {
  font-size: 16px !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
  margin-bottom: 6px;
}
li:last-child { margin-bottom: 0; }
@media (min-width: 1024px) {
  li { line-height: 1.6 !important; }
}
/* Paragraphs inside a list item shouldn't add another block gap */
li > p { margin-bottom: 6px !important; }
li > p:last-child { margin-bottom: 0 !important; }

/* UI lists (menus, footer, sliders) keep no bullets and no indent */
header ul, header ol,
footer ul, footer ol,
nav ul, nav ol,
.swiper-wrapper, .swiper-wrapper li,
.sitemap-grid ul, .legal-toc ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
header li, footer li, nav li,
.swiper-wrapper li, .sitemap-grid li, .legal-toc li {
  font-size: inherit !important;
  line-height: inherit !important;
  margin-bottom: 0;
}

/* Never leave a trailing gap at the end of a card/section/flex child.
   :where() holds the pseudo-class at zero specificity, so this matches the
   default rhythm above at (0,0,2) and wins purely on source order. Without it,
   `p:last-child` would score (0,1,1) and silently beat an explicit mb-* utility
   — which is what was collapsing section intros to a zero gap. */
body h1:where(:last-child), body h2:where(:last-child), body h3:where(:last-child),
body h4:where(:last-child), body h5:where(:last-child), body h6:where(:last-child),
body p:where(:last-child) { margin-bottom: 0; }

/* =========================================================
   MOBILE: JUSTIFIED BODY COPY
   Products, blogs, FAQs, category, accessories and hospitality product
   descriptions read as clean blocks on narrow screens. Desktop keeps its
   natural left alignment.
   ========================================================= */
/* Every CMS description block — product, blog, FAQ, legal, About — is
   justified at EVERY screen size. */
.product-content,
.product-content p,
.product-content li,
.product-desc,
.blog-content,    .blog-content p,    .blog-content li,
.faq-content,     .faq-content p,     .faq-content li,
.legal-content p, .legal-content li,
.legal-intro p {
  text-align: justify !important;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

/* Headings inside those blocks stay left-aligned at every width — a justified
   heading looks broken because it stretches a short line edge to edge. */
.blog-content h1,    .blog-content h2,    .blog-content h3,
.blog-content h4,    .blog-content h5,    .blog-content h6,
.faq-content h1,     .faq-content h2,     .faq-content h3,
.faq-content h4,     .faq-content h5,     .faq-content h6,
.product-content h1, .product-content h2, .product-content h3,
.product-content h4, .product-content h5, .product-content h6,
.legal-content h2,   .legal-content h3 {
  text-align: left !important;
}

/* Mobile: ordinary body copy is justified too, not just CMS blocks.
   No !important, and specificity is only (0,0,2) — so any explicit alignment
   utility (text-center on a section intro, text-end on a CTA) still wins and
   stays exactly where it was. */
@media (max-width: 1023px) {
  body p {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
  }
}

/* =========================================================
   HOME FEATURED ICONS (below the hero slider)
   Title sits tight to its subtitle; icons are large enough to read.
   ========================================================= */
.feature-icon-title {
  margin-bottom: 4px !important;   /* overrides the global heading rhythm */
}
.feature-icon-img {
  width: 56px !important;
  height: 56px !important;
  object-fit: contain;
}
@media (min-width: 1024px) {
  .feature-icon-img { width: 64px !important; height: 64px !important; }
}

/* Partner logo strip (above the footer): never show prev/next arrows */
.partnersSwiper .swiper-button-next,
.partnersSwiper .swiper-button-prev {
  display: none !important;
}

/* =========================================================
   REQUEST A CALL BACK — full-screen modal (portalled to <body>)
   ========================================================= */
.cb-overlay { animation: cb-fade 0.2s ease-out; }
.cb-backdrop {
  background: rgba(15, 15, 26, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.cb-panel { animation: cb-pop 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes cb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cb-pop {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .cb-overlay, .cb-panel { animation: none; }
}

/* Request-a-call-back modal: "connecting to WhatsApp" spinner */
.cb-spinner {
  width: 44px;
  height: 44px;
  border: 3px solid #E6E6E6;
  border-top-color: #25D366;   /* WhatsApp green */
  border-radius: 50%;
  animation: cb-spin 0.9s linear infinite;
}
@keyframes cb-spin { to { transform: rotate(360deg); } }

/* =========================================================
   CATEGORY PRODUCT CARD — premium, self-contained
   ========================================================= */
.product-card {
  border: 1px solid #ECECEC;
  background: #FFFFFF;
  transition: box-shadow .35s ease, transform .35s ease, border-color .35s ease;
}
.product-card:hover {
  border-color: #DCDCDC;
  box-shadow: 0 18px 40px -18px rgba(30, 30, 49, 0.28);
  transform: translateY(-4px);
}

/* Title: always one line. Uses !important to beat the global h3 rule. */
.product-card-title {
  font-size: 20px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  color: #000000 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 !important;
}

/* Description: hard-clamped to 2 lines with a reserved height, so it can never
   spill under the icon strip. !important is needed to beat the global `p` rules. */
.product-card-desc {
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: #717171 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  height: 36px;              /* exactly 2 lines @ 12px * 1.5 */
  margin: 12px 0 14px !important;
}

/* Buttons match the home-page card buttons (.btn-pad-regular: 34px tall,
   10px/20px padding, 10px text) — but sized by the card, so they can't overflow. */
.product-card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 10px 20px;
  font-family: "Figtree", sans-serif;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color .25s ease, color .25s ease;
}
/* Same responsive step-down as .btn-pad-regular on mid-size screens */
@media (min-width: 769px) and (max-width: 1400px) {
  .product-card-btn { padding: 6px 10px; }
}
/* Narrow cards: shed padding before anything can clip */
@media (max-width: 400px) {
  .product-card-btn { padding: 0 6px; }
}

/* =========================================================
   PRODUCT DETAIL HERO (mattresses/[slug], accessories-details/[slug])
   The gallery + details block must fit the first screen on desktop,
   at any screen size. Uses --app-vh (set by ViewportScaler) so it stays
   correct even when the root is CSS-zoomed on very large displays.
   ========================================================= */
/* The gallery is capped to the visible screen so the details column (down to the
   feature-icon row) lands above the fold. No internal scrollbars — the details
   column flows naturally and the page scrolls as normal. */
@media (min-width: 1024px) {
  /* Available height = viewport - header (92px) - section padding - breathing room */
  .product-hero { --stage-h: calc(var(--app-vh, 100vh) - 92px - 80px); }

  /* Tighten the details stack so the feature-icon row clears the fold */
  .product-hero-details { gap: 14px; }
  .product-hero-details h1 { margin-bottom: 10px !important; }
  .product-hero-details .product-desc {
    font-size: 16px !important;
    line-height: 1.55 !important;
    margin-bottom: 0 !important;
  }
  /* Feature-icon row: no extra top margin, it's the last thing on screen */
  .product-hero-icons { margin-top: 0 !important; }

  .product-hero-media,
  .product-hero-media > * { min-height: 0; }

  /* Thumbnail rail matches the stage and scrolls only if there are many thumbs */
  .product-hero-thumbs { max-height: var(--stage-h); min-height: 0; }
  .product-hero-thumbs-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

  /* Main image scales down to fit the screen instead of dictating the height */
  .product-hero-stage { display: flex; flex-direction: column; min-height: 0; }
  .product-main-img {
    max-height: var(--stage-h);
    min-height: 320px;
    width: 100%;
    object-fit: contain;
    object-position: center top;
  }

  /* Details column: natural height, NO scroller */
  .product-hero-details {
    height: auto;
    overflow: visible;
  }

  /* Gallery holds position while the details column scrolls past it, and
     releases naturally when the hero grid ends — i.e. at the next section.
     align-self:start is required: a stretched grid item fills the whole row
     and so has no spare travel to stick within.
     top clears the header, which becomes fixed on scroll. */
  .product-sticky-media {
    position: sticky;
    top: 100px;
    align-self: start;
  }
}

/* =========================================================
   HOME HERO SLIDER — entrance & Ken Burns animation
   ========================================================= */
.hero-slide-img {
  will-change: transform, opacity;
  transform: scale(1.02);
}
/* Slow cinematic zoom + subtle rise on the currently active slide */
.hero-slide-active .hero-slide-img {
  animation: heroKenBurns 6000ms ease-out both;
}
@keyframes heroKenBurns {
  0%   { transform: scale(1.12); }
  100% { transform: scale(1); }
}
/* Soft fade-in of the active slide's image */
.hero-slide-active .hero-slide-fade {
  animation: heroFadeIn 900ms ease both;
}
@keyframes heroFadeIn {
  0%   { opacity: 0.35; }
  100% { opacity: 1; }
}
/* Animated pill dot for the active indicator */
.hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.45);
  transition: width 400ms cubic-bezier(0.22, 1, 0.36, 1), background 400ms ease;
}
.hero-dot.is-active {
  width: 28px;
  background: #ffffff;
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide-active .hero-slide-img,
  .hero-slide-active .hero-slide-fade { animation: none; }
  .hero-slide-img { transform: none; }
}

/* =========================================================
   LEGAL / INFO PAGES (Terms, Privacy, E-Warranty T&C, Sitemap)
   ========================================================= */
html { scroll-behavior: smooth; }

/* ---- Hero ----
   .page-hero is the shared breadcrumb-hero height used across the site
   (Blogs, Where to Buy, city/state search, FAQ, Contact, Warranty, Career,
   Latest Offers) so every one of them matches the legal pages. */
.legal-hero,
.page-hero { min-height: 260px; }
@media (min-width: 768px) {
  .legal-hero,
  .page-hero { min-height: 380px; }
}
.legal-hero-veil {
  background: linear-gradient(180deg, rgba(30,30,49,0.82) 0%, rgba(30,30,49,0.62) 100%);
}
.legal-eyebrow {
  font-size: 12px !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75) !important;
  margin-bottom: 14px !important;
}
.legal-badge {
  display: inline-block;
  margin-top: 22px;
  padding: 8px 18px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #ffffff;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.28);
}

/* ---- Intro callout ---- */
.legal-intro {
  border-left: 4px solid #1E1E31;
  background: #FAFAFA;
  padding: 22px 26px;
  margin-bottom: 44px;
}
.legal-intro p {
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: #3f3f3f !important;
  margin: 0 !important;
}

/* ---- Sticky table of contents ---- */
.legal-toc-inner {
  position: sticky;
  top: 110px;
  border: 1px solid #ECECEC;
  background: #FAFAFA;
  padding: 22px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
}
.legal-toc-title {
  font-size: 11px !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8a8a8a !important;
  margin-bottom: 14px !important;
  font-weight: 600 !important;
}
.legal-toc ul { list-style: none; margin: 0; padding: 0; }
.legal-toc li { margin: 0 0 2px; }
.legal-toc a {
  display: block;
  padding: 7px 12px;
  font-size: 13px;
  line-height: 1.45;
  color: #5c5c5c;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.legal-toc a:hover { color: #1E1E31; background: #F1F1F1; }
.legal-toc a.is-active {
  color: #1E1E31;
  font-weight: 600;
  background: #ffffff;
  border-left-color: #1E1E31;
}

/* ---- Sections ---- */
.legal-section {
  scroll-margin-top: 110px;
  padding-bottom: 30px;
  margin-bottom: 30px;
  border-bottom: 1px solid #EFEFEF;
}
.legal-section:last-child { border-bottom: 0; margin-bottom: 0; }
.legal-section-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  margin-right: 14px;
  background: #1E1E31;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  vertical-align: middle;
}

.legal-content h2 {
  display: flex;
  align-items: center;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: #1E1E31 !important;
  margin: 0 0 var(--kk-gap-tight) !important;
  line-height: 1.3 !important;
}
/* Pages that don't use <LegalSection> (e-warranty, sitemap) still need heading spacing */
.legal-content > h2 { margin-top: 34px !important; }
.legal-content > h2:first-child { margin-top: 0 !important; }

.legal-content h3 {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: #1E1E31 !important;
  margin: calc(var(--kk-gap) * 1.5) 0 var(--kk-gap-tight) !important;
}
.legal-content p {
  font-size: 15px !important;
  line-height: 1.75 !important;
  margin-bottom: var(--kk-gap) !important;
  color: #4C4C4C !important;
}
.legal-content ul,
.legal-content ol {
  margin: 0 0 var(--kk-gap) 0;
  padding-left: 26px;
}
.legal-content ul { list-style: disc; }
.legal-content ol { list-style: decimal; }
.legal-content li {
  font-size: 15px !important;
  line-height: 1.75 !important;
  margin-bottom: 8px;
  color: #4C4C4C !important;
}
.legal-content a { color: #1a73e8; text-decoration: underline; word-break: break-word; }
.legal-content strong { color: #1E1E31; }

/* Highlighted / important notice box */
.legal-note {
  background: #FFF8E6;
  border-left: 4px solid #E0A800;
  padding: 16px 20px;
  margin: 18px 0 22px;
}
.legal-note p { margin: 0 !important; color: #6b5300 !important; }

/* Contact / definition table */
.legal-content table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 18px 0 24px;
}
.legal-content th,
.legal-content td {
  border: 1px solid #E6E6E6;
  padding: 12px 14px;
  font-size: 14px;
  text-align: left;
  color: #4C4C4C;
  vertical-align: top;
}
.legal-content th { background: #FAFAFA; color: #1E1E31; font-weight: 600; }

/* Sitemap page columns */
.sitemap-grid a { color: #3f3f3f; }
.sitemap-grid a:hover { color: #1a73e8; text-decoration: underline; }

/* News & Articles card title — smaller than the global h3 scale */
.news-card-title {
  font-size: 18px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}
@media (min-width: 1024px) {
  .news-card-title { font-size: 18px !important; }
}

/* =========================================================
   BLOG CONTENT (rendered CMS HTML) — restore proper styling
   for links, lists and tables inside .blog-content
   ========================================================= */
.blog-content a {
  color: #1a73e8;
  text-decoration: underline;
  word-break: break-word;
}
.blog-content a:hover { color: #0b5ed7; }

/* Rich-text blocks (blog, FAQ answers, product descriptions) use the same
   headline/paragraph rhythm as the rest of the site. */
.blog-content h1, .blog-content h2, .blog-content h3,
.blog-content h4, .blog-content h5, .blog-content h6,
.faq-content h1, .faq-content h2, .faq-content h3,
.faq-content h4, .faq-content h5, .faq-content h6,
.product-content h1, .product-content h2, .product-content h3,
.product-content h4, .product-content h5, .product-content h6 {
  margin-top: calc(var(--kk-gap) * 1.5) !important;
  margin-bottom: var(--kk-gap-tight) !important;
}
.blog-content h1:first-child, .blog-content h2:first-child, .blog-content h3:first-child,
.faq-content h1:first-child, .faq-content h2:first-child, .faq-content h3:first-child,
.product-content h1:first-child, .product-content h2:first-child, .product-content h3:first-child {
  margin-top: 0 !important;
}
.blog-content p, .faq-content p, .product-content p {
  margin-top: 0 !important;
  margin-bottom: var(--kk-gap) !important;
}

/* A blank line in the CMS editor must not create an empty row of space —
   the next line simply starts on the following row. */
.blog-content p:empty, .faq-content p:empty,
.product-content p:empty, .legal-content p:empty {
  display: none !important;
}
.blog-content br + br, .faq-content br + br,
.product-content br + br, .legal-content br + br {
  display: none !important;
}

.blog-content ul {
  list-style: disc;
  padding-left: 26px;
  margin: 0 0 var(--kk-gap);
}
.blog-content ol {
  list-style: decimal;
  padding-left: 26px;
  margin: 0 0 var(--kk-gap);
}
.blog-content li { margin-bottom: 6px; }
.blog-content ul ul { list-style: circle; margin: 6px 0; padding-left: 22px; }

/* Tables — bordered, full width, scroll horizontally on small screens */
.blog-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.blog-content th,
.blog-content td {
  border: 1px solid #E1E1E1;
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}
.blog-content thead th,
.blog-content th { background: #F5F5F5; font-weight: 600; }
.blog-content tbody tr:nth-child(even) { background: #FAFAFA; }

/* =========================================================
   3D CUBE PAGE LOADER
   ========================================================= */
.kk-loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1E1E31;
  transition: opacity .6s ease, visibility .6s ease;
}
.kk-loader-overlay.kk-hide {
  opacity: 0;
  visibility: hidden;
}
.kk-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
}

/* ---- Typewriter text ---- */
.kk-type {
  display: inline-flex;
  align-items: center;
  color: #fff;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .04em;
  white-space: nowrap;
  min-height: 1.4em;
}
.kk-caret {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-left: 5px;
  background: #F4A53E;
  animation: kk-blink 1s steps(1) infinite;
}
@keyframes kk-blink {
  0%, 50%   { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* =========================================================
   CONTENT WIDTH — inset the center content sections only.
   Header, hero sliders and footer (max-w-1650) stay FULL-BLEED.
   Only the content containers (max-w-1490) get narrower so the
   center content has comfortable side margins.
   ========================================================= */
body { overflow-x: hidden; }

@media (min-width: 1024px) {
  .max-w-\[1490px\] { max-width: 1300px !important; }
}

 .btn-pad-header{
  padding: 14px 60px; text-align: center; white-space: nowrap;
 }

 .btn-pad-regular{
  padding: 10px 20px; height: 34px;text-align: center; white-space: nowrap;
 }
 .text-figtree{
  font-family: "Figtree", sans-serif;
  font-optical-sizing: auto; 
  font-weight:500;
  font-style: normal;
}

 

#main-image {
  transition: opacity 0.25s ease;
}



.text-heading{
  font-family: 'Helvetica';
}


   /* Base grey line */
  .timeline-line-base {
    background: #E1E1E1;
    border-radius: 999px;
  }

  /* Animated gradient line */
  .timeline-line-progress {
    background: linear-gradient(to bottom, #DBDBF3, #1E1E31);
    border-radius: 999px;
    height: 0;
  }

  /* Timeline dots */
  .timeline-dot {
    width: 30px;
    height: 30px;
    background: #909090;
    border: 4px solid #FAFAFA;
    border-radius: 999px;
    z-index: 10;
  }

  /* Mobile responsive */
  @media (max-width: 768px) {
    .timeline-line-base,
    .timeline-line-progress {
      left: 24px !important;
      transform: none !important;
    }
  }
   
/* ========== BASE (ALL SCREENS) ========== */

.timeline-dot {
  width: 10px;
  height: 10px;
  background: #1E1E31;
  border: 2px solid #ffffff;
  border-radius: 999px;
  z-index: 10;
}

.timeline-line-base {
  background: #E1E1E1;
  border-radius: 999px;
}

.timeline-line-progress {
  background: linear-gradient(to bottom, #DBDBF3, #1E1E31);
  border-radius: 999px;
}

  .slider {
    width: 300%; /* 100% * number of slides */
  }

  .slide {
    width: 100%; /* full width per slide */
    height: 100%; /* full height per slide */
  }

.list-star li{
  background-image: url("../images/list-tick-star.png");
  background-repeat: no-repeat;
  background-position: left 4px; padding-left: 24px;
}
/* Swiper base */
.leader-swiper {
  width: 100%;
  padding: 20px 0;
}

.leader-swiper .swiper-wrapper {
  transition-timing-function: linear !important;
}

.swiper-slide {
  width: auto;
}

/* Card */
.leader-card {
  background: #FAFAFA;
  padding: 20px;
  min-width: 260px;
  overflow: hidden;
}

/* stagger effect */
.swiper-slide:nth-child(even) .leader-card {
  margin-top: 40px;
}

.leader-card h3 {
  text-align: center;
  color: #1E1E31;
  font-size: 20px;
  font-weight: bold;
  margin-top: 28px;
}

/* Image container */
.wave-img {
  width: 100%;
  display: block;
  transition: transform 0.6s ease;
  position: relative;
}

/* scale on hover */
.leader-card:hover .wave-img {
  transform: scale(1.08);
}

/* WAVE OVERLAY */
.wave-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 35%,
    rgba(255, 255, 255, 0.65) 50%,
    transparent 65%
  );
  transform: translateX(100%);
  transition: transform 0.8s ease;
  pointer-events: none;
}

/* wave animation */
.leader-card:hover .wave-img::after {
  transform: translateX(-100%);
}

.gt-thumb {
  max-width: auto;
  width: 100%;
  overflow: hidden;
  position: relative;
  border-radius: 8px;
  cursor: pointer;
}

/* images */
.gt-thumb img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 8px;
  transition: all 500ms ease;
}

/* wave image (FIRST IMAGE) */
.gt-thumb img:first-child {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform: translateX(50%) scaleX(2);
  opacity: 0;
  filter: blur(10px);
}

/* hover animation */
.gt-thumb:hover img:first-child {
  transform: translateX(0) scaleX(1);
  opacity: 1;
  filter: blur(0);
}


.checkbox input {
  display: none;
}

.checkbox .box {
  width: 20px;
  height: 20px;
  border: 1px solid #1E1E31;
  background: white;
  position: relative;
  display: inline-block;
}

/* Tick */
.checkbox .box::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 12px;
  border: solid #1E1E31;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
}

/* Checked State */
.checkbox input:checked + .box::after {
  opacity: 1;
}

   /* Optional: better arrow visibility */
    .swiper-button-next,
    .swiper-button-prev {
      color: #000;
    }

    @media (max-width: 768px) {
      .swiper-button-next,
      .swiper-button-prev {
        display: none;
      }
    }
 
.range-slider {
  -webkit-appearance: none;
  background: transparent;
  height: 8px;
}

 #autoSlider > div:nth-of-type(even){
  margin-top: 32px;
 }



/* Thumb */
.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: #1E1E31;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

.range-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: #1E1E31;
  border-radius: 50%;
  cursor: pointer;
} 



#timeline-progress {
  transform-origin: top;
  transform: scaleY(0);
  background: linear-gradient(to bottom, #DBDBF3, #1E1E31);
  transition: transform 0.2s ease-out; /* optional extra smoothness */
}

 .parallax-section {
  position: relative; border:0px; background-color: #FFFFFF; box-shadow: none!important;
}

.parallax-sticky {
  position: sticky;
  top: 0; 
  overflow: hidden; border:0px; background-color: #FFFFFF; box-shadow: none!important;
}

.parallax-img {
  width: 100%; 
  object-fit: cover;   
  transform: translateY(0) scale(1);
  will-change: transform;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.parallax-sticky:hover .parallax-img {
  transform: translateY(var(--parallax-y, 0)) scale(1.08);
}


  .no-scrollbar::-webkit-scrollbar { display: none; }
  .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.text-10{
  font-size: 10px !important; line-height: 14px !important;
}
.text-12{
  font-size: 12px !important;
}
.text-14{
  font-size: 14px;
}
.text-17{
  font-size: 17px;
}

.text-16{
  font-size: 16px;
}

.text-18{
  font-size: 18px;
}

.text-20{
  font-size: 20px;
}

.text-30{
  font-size: 30px;
}

.text-24{
  font-size: 20px;
}

.text-55{
  font-size: 55px;font-family: 'Helvetica';
}

.text-black-variant{
color: #4C4C4C;
}
.text-20-heading{
  font-size: 20px;font-family: "Figtree", sans-serif; color: #4C4C4C;
}

.text-24-heading{
  font-size: 20px;font-family: "Figtree", sans-serif; color: #000000;
}

.text-28-heading{
  font-size: 28px;font-family: "Figtree", sans-serif; color: #000000;
}

.text-20-heading-black{
  font-size: 20px;font-family: "Figtree", sans-serif; color: #000000;
}

.text-38-heading{
  font-size:38px;font-family: "Figtree", sans-serif; color: #1E1E31;
}


.text-20-heading-sidebar{
  font-size: 20px;font-family: "Figtree", sans-serif; color: #000000;
}
 

 .accordion-content {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 400ms ease, opacity 300ms ease;
  }

  .accordion-item.open .accordion-content {
    max-height: 500px; /* large enough for content */
    opacity: 1;
  }

  .productAccordian  .accordion-item .accordion-content{ 
    opacity: 0!important; 
  }

    .productAccordian  .accordion-item.open .accordion-content{ 
    opacity: 1!important; 
  }

.text-playfair-display{
  font-family: 'Helvetica bold', 'Helvetica', sans-serif !important; font-size: 40px; line-height: 56px; font-weight: 800;
}


.ul-li-text{
  font-size: 20px;font-family: "Figtree", sans-serif; color: #4C4C4C;
}

.faq-icon{
  padding: 15px 12px 15px 12px; align-items: center; justify-content: center; display: flex; background-color: #FFFFFF; border-radius: 100%; 
}

.bg-faq-item-block{
  background-color: #FFFFFF; padding: 18px 15px 18px 15px; margin-bottom: 15px;
}
.icon-dark{
  color: #1E1E31;
}

.faq-content{
  font-size: 14px; color: #000000;
}
   #siteHeader {
    position: relative;
    width: 100%; 
   transition:
    box-shadow 0.3s ease,
    background-color 0.3s ease,
    transform 0.3s ease;
     transform: translateY(0);
  }

  .header-fixed {
  position: fixed!important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999; background-color: #1E1E31;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  transform: translateY(0); 
  }

  .priority-slider {
    height: 433px;
  }

.recentblogs-badges{
  padding: 5px; border-radius: 300px; background-color: rgba(30, 30, 49, 0.6);
} 
 

.badge-view{
  background-color: rgba(30, 30, 60, 0.6); border-radius: 300px; font-size: 16px; color: #FFF;font-family: "Figtree", sans-serif; padding: 12px 15px; top: 15px; right: 21px;

}
.para-txt{
  color: #4C4C4C; font-size: 20px; line-height: 28px;
}

.side-block-bg{
  background-color: #FAFAFA; padding: 20px;
} 
 
footer{
  background-color:#1E1E31
}
.accordion-content {
  color: #fff!important; opacity: 1!important;
}
.accordion-item a:hover {
  color: #d1d5db;
}
  .tags-popular-text, a.tags-popular-text {
font-family: "Figtree", sans-serif;
  font-weight: 400; font-size: 14px;
  font-style: normal; color: #6D6D6D; text-decoration: none;
}
 a.tags-popular-text:hover{
  text-decoration: none;color: #FFFFFF;background-color: #6D6D6D;
 }

 .reveal {
  opacity: 0;
  transform: translate3d(0, 100px, 0);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.section-top-pad-48{
  padding-top: 48px;
}
.section-top-pad{
  padding-top: 98px;
}

.top-pad-76{
  padding-top:76px;
}

.top-pad-88{
  padding-top:88px;
}
.bottom-pad-88{
  padding-bottom:88px;
}

.section-pad-90{
  padding-top:90px;
  padding-bottom:90px;
}

.section-pad-50{
  padding-top:50;
  padding-bottom:50;
}

.bg-light-gray{
  background-color: #FAFAFA;
}

.bg-light-gray-pad-50{
  background-color: #FAFAFA; padding: 50px;
}

.bg-light-gray-pad-20{
  background-color: #FAFAFA; padding: 20px; position: relative; margin-bottom: 0px;
}
.exclusive-btn{
  position: absolute; right: 0px; top: 20px;
}

.bg-light-gray-with-pad{
  background-color: #FAFAFA;
    padding-top:50px;
   padding-bottom:50px;
}
 


    @media (min-width: 769px) and (max-width: 1400px) {
.btn-pad-regular{
  padding: 6px 10px; height: auto;
 }

}

    @media (max-width: 768px) {

      .bg-light-gray-pad-20{
  background-color: #FAFAFA; padding: 10px; position: relative; margin-bottom: 0px;
}
      .text-30{
  font-size: 24px;
}

      .exclusive-btn{
  position: relative; right: auto; top: 0px; left: 0; margin-bottom: 10px;
}
      
 .btn-pad-header{
  padding: 14px 46px; 
 }



      .faq-icon{
  padding: 12px 10px 12px 10px; align-items: center; justify-content: center; display: flex; background-color: #FFFFFF; border-radius: 100%; 
}
      .text-playfair-display{
  font-family: 'Helvetica bold', 'Helvetica', sans-serif !important; font-size: 24px; line-height:32px; font-weight: 800;
}
.text-55{
  font-size: 24px;font-family: 'Helvetica';
}
      .bg-light-gray-pad-50{
  background-color: #FAFAFA; padding: 32px 24px;
}
.top-pad-76{
  padding-top:48px;
}

.bottom-pad-88{
  padding-bottom:48px;
}
      .section-top-pad{
  padding-top: 48px;
}

.top-pad-88{
  padding-top:48px;
}
.section-pad-90{
  padding-top:48px;
  padding-bottom:48px;
}

    .swiper-button-next,
    .swiper-button-prev {
      display: none;
    }
  }


  .ba-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%; /* fully responsive */
}

.ba-slider img {
  width: 100%;
  display: block;
}

.ba-slider .resize {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;   
}
.ba-slider .resize_over_color {
  position: absolute;
   height: 100%;
  width: 100%;
   background-color: #37343545;  z-index: 2;
  pointer-events: none;
}
.ba-slider .resize img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: none;
}



.ba-slider .handle {
  position: absolute;
  top: 0;
  width: 4px;
  height: 100%;
  background: #fff;
  cursor: ew-resize;
  z-index: 10;
  transition: background 0.2s;
}

.ba-slider .handle:hover {
  background: #ddd;
}

.ba-slider .handle::after {
  content: '';
    position: absolute;
    top: 50%;
    width: 41px;
    height: 41px;
    margin: -32px 0 0 -22px; 
    background-image: url(../images/sleepId/slide/slide-btn.png); background-repeat: no-repeat; background-position: left top;
}
 

 /* ===== UNIQUE CORE STYLES ===== */
.tw3d-rotator{
  position:relative;
  z-index:20;
}
.tw3d-rotator img{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%) scale(.85);
  opacity:0;
  transition:all .65s cubic-bezier(.25,.8,.25,1);
  z-index:1;
  pointer-events:none;
}

/* loader reveal */
.tw3d-rotator img.tw3d-show{
  opacity:1;
  transform:translateX(-50%) scale(1) rotate(var(--rot));
}

/* carousel base */
.tw3d-rotator.tw3d-carousel img{
  opacity:0;
}

/* CENTER */
.tw3d-rotator.tw3d-carousel img.tw3d-active{
  opacity:1;
  left:50%;
  transform:translateX(-50%) scale(1);
  z-index:3;
}

/* RIGHT */
.tw3d-rotator.tw3d-carousel img.tw3d-next{
  opacity:.9;
  left:100%;
  transform:translateX(-95%) scale(.78);
  filter:blur(4px);
  z-index:2;
}

/* LEFT */
.tw3d-rotator.tw3d-carousel img.tw3d-prev{
  opacity:.9;
  left:0%;
  transform:translateX(-5%) scale(.78);
  filter:blur(4px);
  z-index:2;
}

/* hide buttons during loading */
.tw3d-rotator:not(.tw3d-carousel) button{
  opacity:0;
  pointer-events:none;
}

/* show after ready */
.tw3d-rotator.tw3d-carousel button{
  opacity:1;
}


/* ALWAYS keep buttons above slides */
.tw3d-rotator button{
  position:absolute;
  z-index:9999 !important;
  display:flex !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

/* make sure icon visible */
.tw3d-rotator button img{
  display:block;
  opacity:1 !important;
}

/* Hide buttons ONLY during loader */
.tw3d-rotator:not(.tw3d-carousel) button{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* Show buttons after carousel ready */
.tw3d-rotator.tw3d-carousel button{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}