/*======================================================================
  UI CONSISTENCY LAYER
  Loaded LAST on every page, after style.css and after the per-page
  premium skin (home-premium / about-premium / services-premium /
  pages-premium). Three things are decided here, once, for the whole
  site - change them here and nowhere else:

      1. every section heading is set the same way;
      2. every sub-title badge is set the same way;
      3. every button and every carousel arrow is set the same way,
         square-cornered and with no drop shadows.

  SECTION BACKGROUNDS ARE NOT TOUCHED
  An earlier pass flattened every section to white and stripped the
  gradients, tinted bands, curved bands and band photographs. That was
  reverted at the client's request: each skin owns its own section
  backgrounds again, exactly as before. Do not add background rules for
  sections here - if the flat treatment is ever wanted back, it belongs
  in its own layer rather than mixed into this one.

  Because the bands are back, some of them are dark or sit on a
  photograph, and headings and buttons have to invert on those. The
  list is in one place - the DARK BANDS blocks below - so adding
  another dark surface means adding it there and nowhere else:

      .zeb-area          navy band, home page
      .cta-area          photo band, home page
      .consult-cta       photo band, service pages
      .achievement-area  photo band, about page
      .faq-card-cta      navy card, about page (buttons only - the
                         card's own heading is already white)

  WHY .page-wrapper IS REPEATED FOUR TIMES
  Not a typo and not decoration. The rules being overridden run up to
  six classes deep and already carry `!important` (for example
  `.services-premium .consult-cta .theme-btn { background: #fff
  !important }`), so `!important` alone does not win - the more
  specific selector does. Repeating the wrapper class raises this
  file's specificity above anything in the other five stylesheets
  without inventing selectors that depend on page structure. Keep the
  repetition on any rule added below.

  The floating WhatsApp / call widget (.floating-cta) and the
  scroll-to-top button are deliberately untouched: they are floating
  controls rather than page buttons, and they need their shadow to
  read against whatever they happen to be floating over.
======================================================================*/

:root {
  --ui-heading: #124185;
  --ui-ink: #10233f;
  --ui-ink-soft: #4d6280;
  --ui-navy: #123f80;
  --ui-navy-deep: #0a2a5e;
  --ui-line: #d8e5f6;
  /* Buttons and arrows are square-cornered. Kept as a token so the two
     stay in step if a radius is ever wanted back. */
  --ui-radius: 0;
  /* Curve on the footer's top corners. Mirrors the --rhd-band scale the
     home skin uses, which is not defined on the other pages. */
  --ui-footer-radius: 64px;
}

@media only screen and (max-width: 1199px) { :root { --ui-footer-radius: 52px; } }
@media only screen and (max-width: 991px)  { :root { --ui-footer-radius: 40px; } }
@media only screen and (max-width: 767px)  { :root { --ui-footer-radius: 30px; } }
@media only screen and (max-width: 479px)  { :root { --ui-footer-radius: 22px; } }


/*----------------------------------------------------------------------
  01. SECTION HEADINGS
  One size, one weight, one case for every section title on every page:
  67px on desktop, stepping down at the theme's own breakpoints rather
  than scaling fluidly, so the same heading lands on the same size on
  every page at every width.

  The theme's 2px text-shadow on h2 is dropped - it read as a smear at
  this size and was applied inconsistently anyway.

  Two h2s in the markup are not headings and are excluded by class:
  .count-text (the animated counters, which keep the theme's own scale)
  and .icon (the numbered steps in the work-process timeline).

  The rule the skins drew under some headings is off - it only ever
  appeared under a few of them, which is the inconsistency this file
  exists to remove.
----------------------------------------------------------------------*/
.page-wrapper.page-wrapper.page-wrapper.page-wrapper section h2:not(.count-text):not(.icon),
.page-wrapper.page-wrapper.page-wrapper.page-wrapper section .h2:not(.count-text):not(.icon) {
  font-family: var(--heading-font) !important;
  font-size: 67px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  color: var(--ui-heading) !important;
  text-transform: none !important;
  text-shadow: none !important;
  margin-top: 0 !important;
}

@media only screen and (max-width: 1199px) {
  .page-wrapper.page-wrapper.page-wrapper.page-wrapper section h2:not(.count-text):not(.icon),
  .page-wrapper.page-wrapper.page-wrapper.page-wrapper section .h2:not(.count-text):not(.icon) {
    font-size: 51px !important;
  }
}

@media only screen and (max-width: 991px) {
  .page-wrapper.page-wrapper.page-wrapper.page-wrapper section h2:not(.count-text):not(.icon),
  .page-wrapper.page-wrapper.page-wrapper.page-wrapper section .h2:not(.count-text):not(.icon) {
    font-size: 42px !important;
  }
}

@media only screen and (max-width: 767px) {
  .page-wrapper.page-wrapper.page-wrapper.page-wrapper section h2:not(.count-text):not(.icon),
  .page-wrapper.page-wrapper.page-wrapper.page-wrapper section .h2:not(.count-text):not(.icon) {
    font-size: 34px !important;
  }
}

/*  DARK BANDS - headings invert. Same face, same size, same case; only
    the colour follows the band underneath. The selector carries the
    same :not()s and an element as the rule above on purpose: without
    them it is the less specific of the two and the navy wins.  */
.page-wrapper.page-wrapper.page-wrapper.page-wrapper section:is(.zeb-area, .cta-area, .consult-cta, .achievement-area) :is(h2, .h2, .white):not(.count-text):not(.icon) {
  color: #ffffff !important;
}

.page-wrapper.page-wrapper.page-wrapper.page-wrapper section h2::after,
.page-wrapper.page-wrapper.page-wrapper.page-wrapper section .section-title h2::after,
.page-wrapper.page-wrapper.page-wrapper.page-wrapper .interior-area .text-center h2::after {
  display: none !important;
}


/*----------------------------------------------------------------------
  02. SUB-TITLES
  Every section carries one and every one of them looks the same: a
  solid navy badge, no gradient, no shadow. The diamond keeps it from
  reading as a plain chip.
----------------------------------------------------------------------*/
.page-wrapper.page-wrapper.page-wrapper.page-wrapper .sub-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
  padding: 7px 22px !important;
  border: 0 !important;
  border-radius: 100px !important;
  background: var(--ui-navy) !important;
  background-image: none !important;
  color: #ffffff !important;
  font-family: var(--body-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

.page-wrapper.page-wrapper.page-wrapper.page-wrapper .sub-title::before {
  content: '' !important;
  width: 6px !important;
  height: 6px !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  transform: rotate(45deg) !important;
  background: rgba(255, 255, 255, 0.85) !important;
}

/*  On the navy band the solid navy badge would disappear, so it takes a
    hairline instead of a fill - same shape, same type, same size.  */
.page-wrapper.page-wrapper.page-wrapper.page-wrapper .zeb-area .sub-title {
  background: transparent !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4) !important;
}


/*----------------------------------------------------------------------
  03. BUTTONS
  Every button on every page: solid navy, white text, a 1px navy border
  so outline and fill agree, square corners, no shadow and no hover
  lift. Hover darkens the fill and nothing moves.

  This deliberately folds in the hero's animated circle-and-arrow
  button - circle, dot and travelling line hidden, arrow glyph kept -
  so it matches every other button on the site.
----------------------------------------------------------------------*/
.page-wrapper.page-wrapper.page-wrapper.page-wrapper :is(
  .theme-btn, a.theme-btn, button.theme-btn,
  .btn-white-bg, button.btn-white-bg,
  .hero-btn, a.hero-btn,
  .primary-readmore,
  .zeb-cta, .brand-cta, .about-intro-cta, .faq-call,
  .contact-btn,
  .section-heading .button a
) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 16px 32px !important;
  border: 1px solid var(--ui-navy) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-navy) !important;
  background-image: none !important;
  color: #ffffff !important;
  font-family: var(--body-font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  /* Labels stay on one line - the CTA button sits in a fixed-width form
     row and wrapped to two lines without this. */
  white-space: nowrap !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease !important;
}

.page-wrapper.page-wrapper.page-wrapper.page-wrapper :is(
  .theme-btn, a.theme-btn, button.theme-btn,
  .btn-white-bg, button.btn-white-bg,
  .hero-btn, a.hero-btn,
  .primary-readmore,
  .zeb-cta, .brand-cta, .about-intro-cta, .faq-call,
  .contact-btn,
  .section-heading .button a
):hover {
  background: var(--ui-navy-deep) !important;
  background-image: none !important;
  border-color: var(--ui-navy-deep) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
}

/*  DARK BANDS - the same button inverted, because navy on navy (or on
    a dark photo) disappears. White fill, navy type; hover fills navy
    and keeps the white edge so the button does not vanish. Same size,
    padding, border and square corners as every other button - only the
    two colours swap.  */
.page-wrapper.page-wrapper.page-wrapper.page-wrapper :is(.zeb-area, .cta-area, .consult-cta, .achievement-area, .faq-card-cta) :is(
  .theme-btn, a.theme-btn, button.theme-btn,
  .btn-white-bg, button.btn-white-bg,
  .hero-btn, a.hero-btn,
  .zeb-cta, .faq-call
) {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: var(--ui-navy) !important;
}

.page-wrapper.page-wrapper.page-wrapper.page-wrapper :is(.zeb-area, .cta-area, .consult-cta, .achievement-area, .faq-card-cta) :is(
  .theme-btn, a.theme-btn, button.theme-btn,
  .btn-white-bg, button.btn-white-bg,
  .hero-btn, a.hero-btn,
  .zeb-cta, .faq-call
):hover {
  background: var(--ui-navy) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

/*  LINK ARROWS
    Three places take an arrow rather than a filled button, because the
    fill fought with the photograph or the card behind it: the home
    banner, the home "Curtains & upholstery" gallery captions and the
    products page captions. Same label, same arrow, same tracking as
    every other button - just no fill, no border and no box. The arrow
    slides on hover instead of the button changing colour.

    All three sit on white (the two caption cards are painted white by
    their skins), so the label is navy.  */
.page-wrapper.page-wrapper.page-wrapper.page-wrapper .hero-area .hero-content a.hero-btn,
.page-wrapper.page-wrapper.page-wrapper.page-wrapper .interior-area .carousel-caption a.hero-btn,
.page-wrapper.page-wrapper.page-wrapper.page-wrapper .projects-01 .carousel-caption a.hero-btn {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--ui-navy) !important;
  gap: 12px !important;
  transition: gap 0.3s ease, color 0.3s ease !important;
}

.page-wrapper.page-wrapper.page-wrapper.page-wrapper .hero-area .hero-content a.hero-btn:hover,
.page-wrapper.page-wrapper.page-wrapper.page-wrapper .interior-area .carousel-caption a.hero-btn:hover,
.page-wrapper.page-wrapper.page-wrapper.page-wrapper .projects-01 .carousel-caption a.hero-btn:hover {
  background: none !important;
  border: 0 !important;
  color: var(--ui-navy-deep) !important;
  gap: 20px !important;
}

/*  The theme turns this arrow gold on hover from a seven-class
    selector, so the colour is restated here at a longer one.  */
.page-wrapper.page-wrapper.page-wrapper.page-wrapper .hero-area .hero-content a.hero-btn:hover .btn-icon .fa,
.page-wrapper.page-wrapper.page-wrapper.page-wrapper .interior-area .carousel-caption a.hero-btn:hover .btn-icon .fa,
.page-wrapper.page-wrapper.page-wrapper.page-wrapper .projects-01 .carousel-caption a.hero-btn:hover .btn-icon .fa {
  color: inherit !important;
  font-size: 16px !important;
}

/*  Icons inside a button sit on the text baseline and take its colour,
    whichever button they are in.  */
.page-wrapper.page-wrapper.page-wrapper.page-wrapper :is(.theme-btn, .btn-white-bg, .hero-btn, .zeb-cta, .brand-cta, .contact-btn) :is(i, .fa, .fas, .fal, .fab) {
  margin: 0 !important;
  color: inherit !important;
  font-size: 14px !important;
  background: none !important;
}

/*  The hero button's animated ornament: circle, dot and line off, the
    arrow kept.  */
.page-wrapper.page-wrapper.page-wrapper.page-wrapper .hero-btn .btn-icon {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.page-wrapper.page-wrapper.page-wrapper.page-wrapper .hero-btn .btn-icon .circle,
.page-wrapper.page-wrapper.page-wrapper.page-wrapper .hero-btn .btn-icon .dot,
.page-wrapper.page-wrapper.page-wrapper.page-wrapper .hero-btn .btn-icon .line {
  display: none !important;
}

.page-wrapper.page-wrapper.page-wrapper.page-wrapper .hero-btn .btn-icon .fa {
  position: static !important;
  color: inherit !important;
  background: none !important;
  transform: none !important;
}


/*----------------------------------------------------------------------
  04. ARROWS
  Carousel arrows, the services arrow and the success-story arrows all
  become the same 48px square: navy outline and navy glyph at rest,
  solid navy with a white glyph on hover. No shadow, no circle, no
  gradient, square corners like the buttons.
----------------------------------------------------------------------*/
.page-wrapper.page-wrapper.page-wrapper.page-wrapper :is(
  .carousel-buttons button,
  .testimonial-nav button,
  .work-arrow,
  .right-arrow,
  .slick-arrow, .slick-prev, .slick-next
) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 6px 0 0 !important;
  border: 1px solid var(--ui-navy) !important;
  border-radius: var(--ui-radius) !important;
  background: #ffffff !important;
  background-image: none !important;
  color: var(--ui-navy) !important;
  font-size: 16px !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color 0.3s ease, color 0.3s ease !important;
}

.page-wrapper.page-wrapper.page-wrapper.page-wrapper :is(
  .carousel-buttons button,
  .testimonial-nav button,
  .work-arrow,
  .right-arrow,
  .slick-arrow, .slick-prev, .slick-next
):hover,
.page-wrapper.page-wrapper.page-wrapper.page-wrapper .service-area .carousel-caption a:hover .right-arrow {
  background: var(--ui-navy) !important;
  border-color: var(--ui-navy) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
}

/*  Glyphs inside an arrow: no background of their own (Bootstrap ships
    the carousel controls as background-image sprites) and the colour
    comes from the button.  */
.page-wrapper.page-wrapper.page-wrapper.page-wrapper :is(.carousel-buttons button, .testimonial-nav button, .work-arrow, .right-arrow) :is(i, .fa, .fas, .fal, span) {
  background: none !important;
  background-image: none !important;
  color: inherit !important;
  font-size: 16px !important;
  width: auto !important;
  height: auto !important;
}

/*  A smaller square on phones. 48px is sized against a desktop heading;
    beside a heading that has stepped down to 34px it reads as the
    heaviest thing in the row, and where the arrows sit next to one they
    stop fitting side by side and stack. 38px keeps a comfortable tap
    target - above the 32px the layout would allow and close to the 40px
    convention - while the glyph comes down with the box so the arrow
    keeps its proportion inside it.

    Applied to the whole arrow set, not one carousel, because this block
    exists so every arrow on the site is the same square.  */
@media only screen and (max-width: 767px) {
  .page-wrapper.page-wrapper.page-wrapper.page-wrapper :is(
    .carousel-buttons button,
    .testimonial-nav button,
    .work-arrow,
    .right-arrow,
    .slick-arrow, .slick-prev, .slick-next
  ) {
    width: 38px !important;
    height: 38px !important;
    font-size: 14px !important;
    margin-right: 4px !important;
  }

  .page-wrapper.page-wrapper.page-wrapper.page-wrapper :is(.carousel-buttons button, .testimonial-nav button, .work-arrow, .right-arrow) :is(i, .fa, .fas, .fal, span) {
    font-size: 14px !important;
  }
}


/*----------------------------------------------------------------------
  05. FOOTER
  The footer markup is byte-identical on all twelve pages, and all four
  skins already paint it the same navy gradient with the same text
  colours. Only the home skin went further, so the rest of the site was
  ending on a squarer, tighter, plainer version of the same band. The
  home treatment is restated here for every page:

      curved top corners      the band shape the home page closes with
      40px above / 84px below the footer sits away from the last section
      1.35 line-height        on the two large closing lines
      circular social buttons outlined, filling white on hover

  The navy background and the white type are restated here as well,
  even though the four skins already carry them, because 404.html
  loads no skin at all - its footer was white type on white. Stating
  the whole footer once means it does not matter whether a page has a
  skin or which one.
----------------------------------------------------------------------*/
.page-wrapper.page-wrapper.page-wrapper.page-wrapper .main-footer {
  background:
    radial-gradient(800px 360px at 12% 0%, rgba(75, 127, 208, 0.28) 0%, transparent 62%),
    linear-gradient(160deg, var(--ui-navy) 0%, var(--ui-navy-deep) 100%) !important;
}

/*  The radial highlight is sized in pixels, so it is scaled down with
    the viewport rather than left to dominate a phone screen.  */
@media only screen and (max-width: 1199px) {
  .page-wrapper.page-wrapper.page-wrapper.page-wrapper .main-footer {
    background-image:
      radial-gradient(490px 220px at 12% 0%, rgba(75, 127, 208, 0.28) 0%, transparent 62%),
      linear-gradient(160deg, var(--ui-navy) 0%, var(--ui-navy-deep) 100%) !important;
  }
}

@media only screen and (max-width: 767px) {
  .page-wrapper.page-wrapper.page-wrapper.page-wrapper .main-footer {
    background-image:
      radial-gradient(265px 120px at 12% 0%, rgba(75, 127, 208, 0.28) 0%, transparent 62%),
      linear-gradient(160deg, var(--ui-navy) 0%, var(--ui-navy-deep) 100%) !important;
  }
}

/*  Type on the navy. Weight 700, not the theme's 900: Playfair Display
    ships up to 700, so 900 is synthesised and smears the letterforms at
    this size. The home skin already made that correction for its own
    footer - this is what the other pages were missing.  */
.page-wrapper.page-wrapper.page-wrapper.page-wrapper .footer-top h2 {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  text-shadow: none !important;
}

.page-wrapper.page-wrapper.page-wrapper.page-wrapper .footer-top .white,
.page-wrapper.page-wrapper.page-wrapper.page-wrapper .footer-top h2 .white {
  color: #ffffff !important;
  text-shadow: none !important;
}

.page-wrapper.page-wrapper.page-wrapper.page-wrapper .footer-bottom,
.page-wrapper.page-wrapper.page-wrapper.page-wrapper .footer-bottom .info p,
.page-wrapper.page-wrapper.page-wrapper.page-wrapper .copyright-area {
  color: rgba(255, 255, 255, 0.72) !important;
}

.page-wrapper.page-wrapper.page-wrapper.page-wrapper .footer-bottom a {
  color: rgba(255, 255, 255, 0.86) !important;
}

.page-wrapper.page-wrapper.page-wrapper.page-wrapper .footer-bottom a:hover,
.page-wrapper.page-wrapper.page-wrapper.page-wrapper .copyright-area a,
.page-wrapper.page-wrapper.page-wrapper.page-wrapper .copyright-area a:hover {
  color: #ffffff !important;
}

.page-wrapper.page-wrapper.page-wrapper.page-wrapper .footer-bottom .h4-rotate {
  color: rgba(255, 255, 255, 0.28) !important;
  text-shadow: none !important;
}

.page-wrapper.page-wrapper.page-wrapper.page-wrapper .footer-bottom-text:has(.to-top) {
  border-right-color: rgba(255, 255, 255, 0.22) !important;
}

.page-wrapper.page-wrapper.page-wrapper.page-wrapper .to-top p {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.8) !important;
}
.page-wrapper.page-wrapper.page-wrapper.page-wrapper .main-footer {
  position: relative;
  border-top: none !important;
  border-radius: var(--ui-footer-radius) var(--ui-footer-radius) 0 0 !important;
  margin-top: 40px !important;
  padding-top: 84px !important;
}

@media only screen and (max-width: 1199px) {
  .page-wrapper.page-wrapper.page-wrapper.page-wrapper .main-footer {
    padding-top: 62px !important;
  }
}

.page-wrapper.page-wrapper.page-wrapper.page-wrapper .footer-top h2 {
  line-height: 1.35 !important;
}

.page-wrapper.page-wrapper.page-wrapper.page-wrapper .to-top p {
  letter-spacing: 0.14em !important;
  font-size: 12px !important;
}

/*  Socials -> circular outline buttons that fill on hover. This is the
    one place a hover lift is kept, because the home page has it and
    these are the footer's own controls rather than page buttons.  */
.page-wrapper.page-wrapper.page-wrapper.page-wrapper .footer-social a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  margin-left: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #ffffff !important;
  transition: background-color 0.35s ease, transform 0.35s ease, border-color 0.35s ease !important;
}

.page-wrapper.page-wrapper.page-wrapper.page-wrapper .footer-social a:hover {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: var(--ui-navy) !important;
  transform: translateY(-3px) !important;
}

.page-wrapper.page-wrapper.page-wrapper.page-wrapper .footer-social i {
  margin-left: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .page-wrapper.page-wrapper.page-wrapper.page-wrapper .footer-social a,
  .page-wrapper.page-wrapper.page-wrapper.page-wrapper .footer-social a:hover {
    transition: none !important;
    transform: none !important;
  }
}

/* ---------------------------------------------------------------------------
   CONTACT - "Send us a message" heading
   The form band sits on a dark split background, so the section heading reads
   white like the rest of the copy inside it.
--------------------------------------------------------------------------- */
/* Matches the shape of the global heading rule above (element + the same
   :not()s), otherwise that rule's navy wins on specificity. */
.page-wrapper.page-wrapper.page-wrapper.page-wrapper section.contact-area .section-title h2:not(.count-text):not(.icon) {
  color: #ffffff !important;
}

/* ---------------------------------------------------------------------------
   CAROUSEL ARROWS - where each set is useful
   Curtains & upholstery (gallery): arrows off below 768px, where the slides
   are swiped rather than clicked and the pills need the full row.
   What our clients say: arrows stay on at every width. They used to be hidden
   from 992px up, back when the section held two reviews and the desktop layout
   showed both side by side - there was nothing to step through. There are six
   now and the slider shows two at a time, so without the arrows the other four
   were unreachable.
--------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
  .page-wrapper.page-wrapper.page-wrapper.page-wrapper .interior-area .carousel-buttons,
  .page-wrapper.page-wrapper.page-wrapper.page-wrapper .interior-area .nav-item:has(.nav-link.active) .carousel-buttons {
    display: none !important;
  }

  /* The pills were held back to leave room for the arrows; with the arrows
     gone they can use the whole row again. */
  .page-wrapper.page-wrapper.page-wrapper.page-wrapper .interior-area ul.nav-pills.tab-style-one {
    max-width: 100% !important;
  }
}

/* ---------------------------------------------------------------------------
   HOME - even section rhythm on mobile / tablet
   Sections carried their own one-off top/bottom padding, so the gaps between
   bands jumped around on small screens. Everything is pinned to the same
   values the WHY CHOOSE US band uses (plain .py-128: 46px tablet, 34px phone).
--------------------------------------------------------------------------- */
@media only screen and (max-width: 991px) {
  .home-premium .about-area,
  .home-premium .about-area.py-128,
  .home-premium .service-area,
  .home-premium .interior-area,
  .home-premium .interior-area.py-128,
  .home-premium .zeb-area,
  .home-premium .work-area,
  .home-premium .timeline-area,
  .home-premium .why-area,
  .home-premium .reviews-area,
  .home-premium .win-area,
  .home-premium .cta-area,
  .home-premium .blog-area {
    padding-top: 46px !important;
    padding-bottom: 46px !important;
  }
}



@media only screen and (max-width: 767px) {
  .home-premium .about-area,
  .home-premium .about-area.py-128,
  .home-premium .service-area,
  .home-premium .interior-area,
  .home-premium .interior-area.py-128,
  .home-premium .zeb-area,
  .home-premium .work-area,
  .home-premium .timeline-area,
  .home-premium .why-area,
  .home-premium .reviews-area,
  .home-premium .win-area,
  .home-premium .cta-area,
  .home-premium .blog-area {
    padding-top: 34px !important;
    padding-bottom: 40px !important;
  }
}


/*----------------------------------------------------------------------
  HEADER MENU COLOUR AND SUBMENU CASE
  Every page's header nav reads in the brand navy rather than near-black,
  with the deeper navy on hover / for the current page. Dropdown items go
  full uppercase so a submenu is visually distinct from the top-level bar.
  Loaded last, so these win over the per-page *-premium skins that paint
  the same links with --rhd-ink.
----------------------------------------------------------------------*/
.main-header .main-menu .navbar-collapse > .navigation > li > a,
.main-header .main-menu .navbar-collapse li.dropdown .dropdown-btn {
  color: var(--ui-navy) !important;
}

.main-header .main-menu .navbar-collapse > .navigation > li > a:hover,
.main-header .main-menu .navbar-collapse > .navigation > li.current > a,
.main-header .main-menu .navbar-collapse > .navigation > li.current-menu-item > a {
  color: var(--ui-navy-deep) !important;
}

.main-header .main-menu .navbar-collapse .navigation li li a {
  color: var(--ui-navy) !important;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.8px;
}

.main-header .main-menu .navbar-collapse .navigation li li a:hover {
  color: var(--ui-navy-deep) !important;
}


/*----------------------------------------------------------------------
  PAGE BANNER HEADING WEIGHT
  The banner title on every inner page reads bold. It cannot be done with
  font-weight alone: the heading face (Playfair Display) is loaded at
  500/600/700 only, so the theme's `font-weight: 900` already renders as
  700 and asking for more changes nothing. The theme faked the extra
  weight with `text-shadow: 2px 0`, which the per-page skins removed
  because it smeared to the right; a centred text-stroke thickens the
  glyph evenly instead.

  The home page is untouched: it has no .banner-content — its opening
  type is the hero, which keeps the theme's own weight.
----------------------------------------------------------------------*/
.page-wrapper .banner-content h1 {
  font-weight: 900 !important;
  text-shadow: none !important;
  -webkit-text-stroke: 1.2px currentColor;
}

@media only screen and (max-width: 991px) {
  .page-wrapper .banner-content h1 {
    -webkit-text-stroke-width: 0.9px;
  }
}

@media only screen and (max-width: 767px) {
  .page-wrapper .banner-content h1 {
    -webkit-text-stroke-width: 0.7px;
  }
}

/*  The breadcrumb trail under the banner title matches it. The body face
    (Montserrat) does load a real 700, so this is a plain font-weight -
    no stroke needed. The "/" separators are drawn as ::before content
    and take the weight separately.  */
.page-wrapper .banner-content .breadcrumb,
.page-wrapper .banner-content .breadcrumb .breadcrumb-item,
.page-wrapper .banner-content .breadcrumb .breadcrumb-item a,
.page-wrapper .banner-content .breadcrumb .breadcrumb-item:not(:first-child)::before {
  font-weight: 700;
}


/*----------------------------------------------------------------------
  FREE CONSULTATION CTA - THREE-LINE HEADING (home page)
  The section reads as exactly three lines: the question, then the
  WhatsApp sentence broken across two. The break is a <br class="d-none
  d-lg-block"> in the markup, so it only applies from 992px up; below
  that the sentence flows and lands on two lines by itself.

  The type steps down from the 67px section scale because the long line
  will not fit three-up at the narrow end of each breakpoint otherwise.
  Sized against the container width at the START of each range, which is
  the tightest case. The selector carries .home-premium and the repeated
  .page-wrapper so it outranks the section-heading rule above.
----------------------------------------------------------------------*/
.page-wrapper.page-wrapper.page-wrapper.page-wrapper.home-premium section.cta-area .cta-content h2 {
  font-size: 58px !important;
}

@media only screen and (max-width: 1199px) {
  .page-wrapper.page-wrapper.page-wrapper.page-wrapper.home-premium section.cta-area .cta-content h2 {
    font-size: 46px !important;
  }
}

@media only screen and (max-width: 991px) {
  .page-wrapper.page-wrapper.page-wrapper.page-wrapper.home-premium section.cta-area .cta-content h2 {
    font-size: 38px !important;
  }
}

@media only screen and (max-width: 767px) {
  .page-wrapper.page-wrapper.page-wrapper.page-wrapper.home-premium section.cta-area .cta-content h2 {
    font-size: 30px !important;
  }
}

/*  The CTA badge sits closer to the heading than the site default. The
    gap was two stacked margins - 16px under the badge plus 16px above
    .cta-content - which read as a hole in a band that now holds only a
    heading and one button.  */
.page-wrapper.page-wrapper.page-wrapper.page-wrapper.home-premium section.cta-area .sub-title {
  margin-bottom: 12px !important;
}

.page-wrapper.page-wrapper.page-wrapper.page-wrapper.home-premium section.cta-area .cta-content {
  margin-top: 0;
}

/*----------------------------------------------------------------------
  FOOTER CONTACT + KEY LINKS
  The address, phone numbers, email addresses and the nav list read bold.
  Body face (Montserrat) loads a real 700, so this is a plain weight -
  no stroke needed. The rotated CONTACT / KEY LINKS labels beside them
  keep their own weight; only the content is bolded.
----------------------------------------------------------------------*/
.page-wrapper.page-wrapper.page-wrapper.page-wrapper .footer-bottom .content .info,
.page-wrapper.page-wrapper.page-wrapper.page-wrapper .footer-bottom .content .info p,
.page-wrapper.page-wrapper.page-wrapper.page-wrapper .footer-bottom .content .info a,
.page-wrapper.page-wrapper.page-wrapper.page-wrapper .footer-bottom .content .info .footer-social span,
.page-wrapper.page-wrapper.page-wrapper.page-wrapper .footer-bottom .content .links li,
.page-wrapper.page-wrapper.page-wrapper.page-wrapper .footer-bottom .content .links a {
  font-weight: 700;
}

/*  The social buttons read bolder alongside the now-bold contact details.
    font-weight does nothing here - Font Awesome's brand face ships in one
    weight - so the ring goes to 2px at a brighter white and the glyph up
    a size, which is what carries the weight for an icon button.  */
.page-wrapper.page-wrapper.page-wrapper.page-wrapper .footer-social a {
  border-width: 2px !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
}

.page-wrapper.page-wrapper.page-wrapper.page-wrapper .footer-social i {
  font-size: 17px !important;
}


/*----------------------------------------------------------------------
  SUCCESS STORY CTA - KEPT INSIDE THE CONTAINER ON PHONES

  Every button on the site is held to one line by the `white-space:
  nowrap` in the BUTTONS block above, which exists so the contact form's
  CTA does not wrap inside its fixed-width row. On the Zebronics band
  that backfires: "SEE OUR MOTORISED CURTAIN WORK" is thirty uppercase
  characters at 14px/700 with 0.08em tracking, so with the 32px side
  padding the button measures roughly 410px. A 375px phone leaves the
  container 351px of inside width, so the button ran past the right edge
  of the band - the wider the label, the further out it went.

  The label is allowed to wrap below 992px, and the button is capped at
  the width of its column so it can never measure wider than that column
  whatever the label says. Wrapping only happens when the line genuinely
  does not fit, so any width with room to spare keeps the single line it
  has now. Centring the text matters only once it takes two lines, and
  the shorter side padding under 480px buys back room on the narrowest
  handsets.

  Scoped to this one button. The nowrap rule is untouched everywhere
  else, so the contact form's CTA still behaves as that block intends.

  This runs to 991px rather than 767px because the band keeps its two
  columns on tablet, which leaves the write-up about 380px wide - also
  narrower than the button's one-line measure, so it needs the same
  allowance there as it does on a phone.
----------------------------------------------------------------------*/
@media only screen and (max-width: 991px) {
  .page-wrapper.page-wrapper.page-wrapper.page-wrapper .zeb-area .zeb-body a.zeb-cta {
    max-width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
  }
}

@media only screen and (max-width: 479px) {
  .page-wrapper.page-wrapper.page-wrapper.page-wrapper .zeb-area .zeb-body a.zeb-cta {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}


/*----------------------------------------------------------------------
  SUCCESS STORY - TIGHTER HEAD OF THE BAND

  The navy band takes its top and bottom padding from the shared .py-128
  rhythm (60 / 46 / 34px), and the "SUCCESS STORY" badge is the first
  thing inside it, so that padding reads as space above the heading. It
  sat further from the top of the band than the heading needed.

  Only the top comes in - the bottom keeps the rhythm it shares with the
  bands either side, so the run of sections still breathes evenly. These
  restate the values from the section-rhythm block above at one class
  more, and this file loads last, so the band opts out of that block's
  top padding without disturbing the sections it is grouped with.
----------------------------------------------------------------------*/
.home-premium.home-premium .zeb-area {
  padding-top: 50px !important;
}

@media only screen and (max-width: 991px) {
  .home-premium.home-premium .zeb-area {
    padding-top: 28px !important;
  }
}

@media only screen and (max-width: 767px) {
  .home-premium.home-premium .zeb-area {
    padding-top: 40px !important;
  }
}


/*----------------------------------------------------------------------
  MOBILE TOP-SPACE OPT-OUT

  An opt-in class for a section that should sit flush under whatever is
  above it on phones. The section-rhythm block earlier in this file gives
  every home-page band the same 34px top padding below 768px, which is
  right for the run of bands but wrong for a section that follows one
  already carrying its own space at the seam.

  Marked in the markup rather than decided here, so the opt-out is
  visible on the section that takes it: add `pt-0-mobile` alongside the
  section's own padding class. Phones only - the section keeps its
  tablet and desktop padding untouched.

  Carried by .about-area on index.html.
----------------------------------------------------------------------*/
@media only screen and (max-width: 767px) {
  .page-wrapper.page-wrapper.page-wrapper.page-wrapper .pt-0-mobile {
    padding-top: 0 !important;
  }
}


/*----------------------------------------------------------------------
  MOBILE / TABLET BOTTOM-SPACE OPT-OUT

  The companion to pt-0-mobile above, for the other end of a section and
  one breakpoint wider - tablet as well as phones.

  The space under a grid section is two things stacked, so closing only
  one of them leaves the other behind: the section's own bottom padding
  (46px on tablet, 40px on phones, from the section-rhythm block) plus
  the .mb-30 the theme puts on every grid tile, which is still there on
  the last one with nothing below it to space away from. Both go.

  Only the LAST tile loses its margin. The others are what separates the
  stacked tiles from each other - one column on phones, two-up on tablet
  - so zeroing all of them would run the images together.

  Marked in the markup rather than decided here, so the opt-out is
  visible on the section that takes it. Desktop keeps its padding.

  Carried by .units-area on index.html.
----------------------------------------------------------------------*/
@media only screen and (max-width: 991px) {
  .page-wrapper.page-wrapper.page-wrapper.page-wrapper .pb-0-tablet-down {
    padding-bottom: 0 !important;
  }

  .page-wrapper.page-wrapper.page-wrapper.page-wrapper .pb-0-tablet-down .row > [class*="col-"]:last-child {
    margin-bottom: 0 !important;
  }
}


/*----------------------------------------------------------------------
  FOOTER CONTACT - KEPT INSIDE THE SCREEN ON PHONES

  The contact block is sized by its own content: .footer-bottom-text and
  the .content inside it are both `width: fit-content`, and .content is
  floated. A floated fit-content box can only shrink down to its
  min-content width, and the min-content here is one unbreakable word -
  homedecorsroyal2023@gmail.com, about 280px at the footer's 16px bold.
  Add the 48px the block is indented by to clear the rotated CONTACT
  label beside it and the box wants ~328px, while a 320px screen leaves
  the container 296px. Everything past that edge was clipped, which is
  why the address, the phone numbers and the email all ran off the
  right-hand side mid-word.

  Two parts. The block is given the column's width instead of its
  content's, so it can never measure wider than the container; and the
  contact lines may break inside a word, which is the only way an email
  address longer than the column can wrap at all. The 48px indent stays
  - the rotated label sits in that strip.

  Below 400px the contact lines also step down to 14px. At 320px the
  column is 248px wide once the label's strip is taken off, and the
  email needs about 260px at 16px, so without this it would wrap
  mid-address on the narrowest handsets even though it now fits on the
  screen. At 14px it lands on one line.
----------------------------------------------------------------------*/
@media only screen and (max-width: 767px) {
  .page-wrapper.page-wrapper.page-wrapper.page-wrapper .footer-bottom-text,
  .page-wrapper.page-wrapper.page-wrapper.page-wrapper .footer-bottom-text .content {
    float: none;
    width: 100%;
    max-width: 100%;
  }

  .page-wrapper.page-wrapper.page-wrapper.page-wrapper .footer-bottom-text .content .info,
  .page-wrapper.page-wrapper.page-wrapper.page-wrapper .footer-bottom-text .content .links {
    min-width: 0;
    max-width: calc(100% - 48px);
  }

  .page-wrapper.page-wrapper.page-wrapper.page-wrapper .footer-bottom .content .info p,
  .page-wrapper.page-wrapper.page-wrapper.page-wrapper .footer-bottom .content .info a {
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

@media only screen and (max-width: 400px) {
  .page-wrapper.page-wrapper.page-wrapper.page-wrapper .footer-bottom .content .info,
  .page-wrapper.page-wrapper.page-wrapper.page-wrapper .footer-bottom .content .info p,
  .page-wrapper.page-wrapper.page-wrapper.page-wrapper .footer-bottom .content .info a {
    font-size: 14px;
    line-height: 24px;
  }
}