/*======================================================================
  Royal Home Decors — ABOUT PAGE COLOUR THEME
  ----------------------------------------------------------------------
  Loaded only by about.html, and every rule is scoped to
  `.page-wrapper.about-premium`, so it cannot reach any other page.

  Scope is deliberately narrow: COLOUR ONLY. Backgrounds, text, buttons,
  icons, borders and dividers move to the blue-and-white palette; no rule
  here changes a width, height, padding, margin, font-size or position,
  so the layout renders exactly as it did before.

  Where the design calls for a hairline that the markup does not already
  have, it is drawn with `box-shadow: inset 0 0 0 1px` rather than
  `border`, because a new border would take up space and reflow the box.

  Layout of this file
    01  Palette
    02  Type colour
    03  Header
    04  Page banner
    05  About (tabs + intro)
    06  Our Services
    07  Achievements
    08  FAQ
    09  Footer
    10  Floating actions
======================================================================*/

/*----------------------------------------------------------------------
  01 — PALETTE
  Same ramp as the homepage skin, so the two pages read as one site.
----------------------------------------------------------------------*/
.page-wrapper.about-premium {
  --rhd-navy-deep: #0a2a5e;
  --rhd-navy: #123f80;
  --rhd-blue: #1b56ad;
  --rhd-blue-soft: #4b7fd0;

  --rhd-tint-05: #f7fafe;
  --rhd-tint-10: #eef4fc;
  --rhd-tint-20: #e2ecf9;
  --rhd-line: #d8e5f6;

  --rhd-ink: #10233f;
  --rhd-ink-soft: #4d6280;

  background: #ffffff;
}

/*----------------------------------------------------------------------
  02 — TYPE COLOUR
  The theme fakes weight with `text-shadow: 2px 0 <colour>` on h1/h2,
  which smears the letterforms. Removing it is a colour change in the
  same sense — nothing moves, the glyphs just stop being doubled.
----------------------------------------------------------------------*/
.about-premium h1,
.about-premium .h1,
.about-premium h2,
.about-premium .h2 {
  text-shadow: none !important;
}

.about-premium h2,
.about-premium .h2,
.about-premium h3,
.about-premium h5 {
  color: var(--rhd-navy);
}

.about-premium p {
  color: var(--rhd-ink-soft);
}

/* Eyebrow labels ("WHAT WE DO", "GOOD TO KNOW") -> the same rounded navy
   badge the homepage uses, so every page's eyebrow reads identically.
   Kept in sync with home-premium.css section 02. */
.about-premium .sub-title,
.about-premium .section-title .sub-title,
.about-premium.page-wrapper .sub-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 22px;
  border-radius: 100px;
  background: linear-gradient(135deg, var(--rhd-navy) 0%, var(--rhd-blue) 100%);
  color: #ffffff;
  font-family: var(--body-font);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(16, 47, 96, 0.07);
}

/* Small diamond ornament inside the badge. */
.about-premium .sub-title::before {
  content: '';
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  transform: rotate(45deg);
  background: rgba(255, 255, 255, 0.85);
}

@media only screen and (max-width: 767px) {
  .about-premium .sub-title,
  .about-premium .section-title .sub-title {
    font-size: 11px;
    padding: 6px 16px;
    letter-spacing: 0.12em;
  }
}

/*----------------------------------------------------------------------
  03 — HEADER
----------------------------------------------------------------------*/
.about-premium .main-header .header-upper {
  background: #ffffff !important;
  border-bottom-color: var(--rhd-line) !important;
}

.about-premium .main-menu .navbar-collapse > .navigation > li > a {
  color: var(--rhd-ink) !important;
}

.about-premium .main-menu .navbar-collapse > .navigation > li > a:hover {
  color: var(--rhd-navy) !important;
}

.about-premium .main-menu .navbar-collapse li li a {
  color: var(--rhd-ink) !important;
}

.about-premium .main-menu .navbar-collapse li li a:hover {
  color: var(--rhd-navy) !important;
}

.about-premium .main-menu .navbar-collapse li li {
  border-top-color: var(--rhd-line) !important;
}

@media only screen and (max-width: 991px) {
  .about-premium .main-menu .navbar-collapse li {
    border-top-color: var(--rhd-line) !important;
  }

  .about-premium .main-menu .navbar-collapse > ul > li:last-child {
    border-bottom-color: var(--rhd-line) !important;
  }

  .about-premium .main-menu .navbar-collapse li.dropdown .dropdown-btn {
    border-left-color: var(--rhd-line) !important;
  }
}

/*----------------------------------------------------------------------
  04 — PAGE BANNER
  Same wash as the inner service pages (curtains.html and friends):
  a flat neutral black at 55%, not a brand-navy tint.
----------------------------------------------------------------------*/
.about-premium .banner-area {
  background-image:
    linear-gradient(rgba(18, 18, 18, 0.55), rgba(18, 18, 18, 0.55)),
    url(../images/curtains/living-room-teal-sheer-curtains.jpg) !important;
}

.about-premium .banner-content h1,
.about-premium .banner-content .breadcrumb li,
.about-premium .banner-content .breadcrumb a {
  color: #ffffff !important;
}

.about-premium .banner-content .breadcrumb a:hover {
  color: var(--rhd-blue-soft) !important;
}

/*----------------------------------------------------------------------
  05 — ABOUT (tabs + intro)
----------------------------------------------------------------------*/
.about-premium .about-style-2 {
  background: #ffffff;
}

.about-premium .about-style-2 .section-title h2 {
  color: var(--rhd-navy);
}

/* Who We Are / Mission / Vision.
   The base theme already renders these as solid navy pills with a 2px
   border (ul.nav-pills.tab-style-one .nav-link), which left every tab
   looking selected. Only the fill and the label swap here — the border
   stays 2px, so the pills keep their exact size and position.
     idle   -> white pill, navy outline, navy label
     active -> navy pill, white label */
.about-premium ul.nav-pills.tab-style-one .nav-link {
  background-color: #ffffff !important;
  border-color: var(--rhd-navy) !important;
  color: var(--rhd-navy) !important;
}

.about-premium ul.nav-pills.tab-style-one .nav-link:hover {
  background-color: var(--rhd-tint-10) !important;
  color: var(--rhd-navy) !important;
}

.about-premium ul.nav-pills.tab-style-one .nav-link.active,
.about-premium ul.nav-pills.tab-style-one .nav-item.current .nav-link {
  background-color: var(--rhd-navy) !important;
  border-color: var(--rhd-navy) !important;
  color: #ffffff !important;
}

.about-premium .about-style-2 .tab-content p {
  color: var(--rhd-ink-soft);
}

/* "Contact Us" — solid navy, white label. */
.about-premium .btn-white-bg,
.about-premium .about-style-2 .btn-white-bg {
  background: var(--rhd-navy) !important;
  border-color: var(--rhd-navy) !important;
  color: #ffffff !important;
}

/* The theme gives this button 16px/32px padding and lets it inherit the
   surrounding type, which came out as a slab about twice the size of any
   other button on the page. Size is set here rather than left to inherit,
   so it cannot drift with whatever the column's font happens to be:
   roughly half the height it was, and in line with .theme-btn elsewhere. */
.about-premium .about-style-2 .btn-white-bg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 34px;
  border-width: 1px;
  font-family: var(--body-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.06em;
}

.about-premium .btn-white-bg:hover,
.about-premium .about-style-2 .btn-white-bg:hover {
  background: var(--rhd-blue) !important;
  border-color: var(--rhd-blue) !important;
  color: #ffffff !important;
}

/*----------------------------------------------------------------------
  06 — OUR SERVICES
  The theme paints this band flat grey (--black-10). A soft blue tint in
  its place is the single biggest colour change on the page.
----------------------------------------------------------------------*/
.about-premium .service-area-2,
.about-premium .service-area-2.black-90-bg {
  background:
    radial-gradient(760px 320px at 12% 0%, rgba(255, 255, 255, 0.9) 0%, transparent 62%),
    linear-gradient(160deg, var(--rhd-tint-10) 0%, var(--rhd-tint-20) 100%) !important;
  color: var(--rhd-ink-soft);
}

.about-premium .service-area-2 h2 {
  color: var(--rhd-navy);
}

/* Service names under each icon: black. */
.about-premium .service-area-2 .service-item h5,
.about-premium .service-area-2 .service-item a h5 {
  color: #000000 !important;
}

.about-premium .service-area-2 p {
  color: var(--rhd-ink-soft);
}

/* Service icons in brand blue. */
.about-premium .service-area-2 .icon .fa:before,
.about-premium .service-area-2 .icon .fa {
  color: var(--rhd-blue) !important;
}

/* "Read more" arrow: navy at rest, brighter blue on hover. */
.about-premium .service-area-2 .right-arrow,
.about-premium .service-area-2 .right-arrow .fa {
  color: var(--rhd-navy) !important;
}

.about-premium .service-area-2 .service-item:hover .right-arrow,
.about-premium .service-area-2 .service-item:hover .right-arrow .fa {
  color: var(--rhd-blue) !important;
}

/*----------------------------------------------------------------------
  07 — ACHIEVEMENTS
  Same treatment as the banner: flat neutral black at 55% over the photo.
----------------------------------------------------------------------*/
.about-premium .achievement-area {
  background-image:
    linear-gradient(rgba(18, 18, 18, 0.55), rgba(18, 18, 18, 0.55)),
    url(../images/curtains/grey-blackout-curtains-modern-bedroom.jpg) !important;
}

.about-premium .achievement-area .count-text,
.about-premium .achievement-area .counter-text-wrap .h2,
.about-premium .achievement-area .counter-title {
  color: #ffffff !important;
}

/*----------------------------------------------------------------------
  08 — FAQ
----------------------------------------------------------------------*/
.about-premium .faq-area,
.about-premium .faq-area.black-110-bg {
  /* Same wash as the BRANDS WE STOCK band, so the two read as one
     surface rather than white / tint / white down the page. Kept in step
     with .brand-area - change both together. */
  background:
   radial-gradient(760px 320px at 12% 0%, rgba(255, 255, 255, 0.9) 0%, transparent 62%), linear-gradient(160deg, var(--rhd-tint-10) 0%, var(--rhd-tint-20) 100%) !important;
}

.about-premium .faq-area h2 {
  color: var(--rhd-navy);
}

.about-premium .faq-head-text p {
  color: var(--rhd-ink-soft);
}

/* Cards: white on white would vanish, so each gets a tint plus a hairline
   drawn as an inset shadow — a border here would reflow the grid. */
.about-premium .faq-card {
  background: var(--rhd-tint-05) !important;
  box-shadow: inset 0 0 0 1px var(--rhd-line);
}

.about-premium .faq-card:hover {
  box-shadow: inset 0 0 0 1px var(--rhd-blue-soft), 0 16px 40px rgba(16, 47, 96, 0.10);
}

.about-premium .faq-card .faq-question {
  color: var(--rhd-navy);
}

.about-premium .faq-card .faq-lead {
  color: var(--rhd-ink);
}

.about-premium .faq-card p {
  color: var(--rhd-ink-soft);
}

/* The numbered badge already uses --primary-color; pin it to the ramp so
   it matches the rest of the page exactly. */
.about-premium .faq-num {
  background: linear-gradient(135deg, var(--rhd-navy) 0%, var(--rhd-blue) 100%);
  color: #ffffff;
}

/* The last card is the call-to-action: navy panel, white type. */
.about-premium .faq-card.faq-card-cta {
  background: linear-gradient(150deg, var(--rhd-navy) 0%, var(--rhd-navy-deep) 100%) !important;
  box-shadow: none;
}

.about-premium .faq-area .faq-card-cta .faq-question,
.about-premium .faq-area .faq-card-cta p {
  color: #ffffff !important;
}

.about-premium .faq-card-cta .btn-white-bg {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: var(--rhd-navy) !important;
}

.about-premium .faq-card-cta .btn-white-bg:hover {
  background: var(--rhd-blue-soft) !important;
  border-color: var(--rhd-blue-soft) !important;
  color: #ffffff !important;
}

.about-premium .faq-card-cta .faq-call {
  color: #ffffff !important;
}

.about-premium .faq-card-cta .faq-call:hover {
  color: var(--rhd-blue-soft) !important;
}

/*----------------------------------------------------------------------
  09 — FOOTER
  Navy, matching the homepage footer so the two pages end the same way.
----------------------------------------------------------------------*/
.about-premium .main-footer {
  background:
    radial-gradient(800px 360px at 12% 0%, rgba(75, 127, 208, 0.28) 0%, transparent 62%),
    linear-gradient(160deg, var(--rhd-navy) 0%, var(--rhd-navy-deep) 100%) !important;
  border-top-color: transparent !important;
 
}

.about-premium .footer-top h2,
.about-premium.page-wrapper .footer-top h2 {
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: none !important;
}

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

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

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

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

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

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

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

.about-premium .to-top p,
.about-premium.page-wrapper .to-top p {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

.about-premium .footer-social a {
  color: #ffffff !important;
}

.about-premium .footer-social a:hover {
  color: var(--rhd-blue-soft) !important;
}

/*----------------------------------------------------------------------
  10 — FLOATING ACTIONS
----------------------------------------------------------------------*/
.about-premium .floating-cta .call-btn {
  background: var(--rhd-navy);
  color: #ffffff;
}

.about-premium .scroll-top {
  background: var(--rhd-navy);
  color: #ffffff;
}

.about-premium .preloader {
  background: var(--rhd-tint-05) !important;
}


/*----------------------------------------------------------------------
  RESPONSIVE — RADIAL WASH SCALING
  Same reasoning as home-premium.css: the radial highlights are sized in
  fixed pixels, so on a narrow viewport they cover the whole section and
  read as a full gradient. Shrink them in proportion so tablet and mobile
  match the desktop look. Desktop rules are untouched.
----------------------------------------------------------------------*/
@media only screen and (max-width: 991px) {
  .about-premium .service-area-2,
  .about-premium .service-area-2.black-90-bg {
    background-image:
      radial-gradient(465px 196px at 12% 0%, rgba(255, 255, 255, 0.9) 0%, transparent 62%),
      linear-gradient(160deg, var(--rhd-tint-10) 0%, var(--rhd-tint-20) 100%) !important;
  }

  .about-premium .main-footer {
    background-image:
      radial-gradient(490px 220px at 12% 0%, rgba(75, 127, 208, 0.28) 0%, transparent 62%),
      linear-gradient(160deg, var(--rhd-navy) 0%, var(--rhd-navy-deep) 100%) !important;
  }
}

@media only screen and (max-width: 767px) {
  .about-premium .service-area-2,
  .about-premium .service-area-2.black-90-bg {
    background-image:
      radial-gradient(250px 107px at 12% 0%, rgba(255, 255, 255, 0.9) 0%, transparent 62%),
      linear-gradient(160deg, var(--rhd-tint-10) 0%, var(--rhd-tint-20) 100%) !important;
  }

  .about-premium .main-footer {
    background-image:
      radial-gradient(265px 120px at 12% 0%, rgba(75, 127, 208, 0.28) 0%, transparent 62%),
      linear-gradient(160deg, var(--rhd-navy) 0%, var(--rhd-navy-deep) 100%) !important;
  }
}


/*----------------------------------------------------------------------
  BUTTON HOVER
  Every filled button inverts on hover: white panel, navy label.
----------------------------------------------------------------------*/
.about-premium .theme-btn:hover,
.about-premium a.theme-btn:hover,
.about-premium .btn-white-bg:hover,
.about-premium button.btn-white-bg:hover,
.about-premium .about-style-2 .btn-white-bg:hover,
.about-premium .faq-card-cta .btn-white-bg:hover {
  background: #ffffff !important;
  border-color: var(--rhd-navy) !important;
  color: var(--rhd-navy) !important;
}


/*----------------------------------------------------------------------
  ABOUT INTRO
  Copy left, photo right, both inside the page container — the same
  two-column shape the service pages use, so this band sits in the page's
  normal rhythm instead of breaking out of it.

  The band is white on purpose. "Our Services" directly below it carries
  the blue tint, so alternating keeps the two from merging into one long
  wash of colour.

  The four facts sit in a 2x2 grid of cards rather than a stacked list.
  Two short rows instead of four long ones is what lets the copy column
  finish level with the photo beside it — the two columns are stretched to
  a common height, so the photo fills whatever the copy measures.
----------------------------------------------------------------------*/
.about-premium .about-intro {
  position: relative;
  overflow: hidden;
  background: #ffffff;
}

.about-premium .about-intro-text .section-title {
  margin-bottom: 22px;
}

/* The theme draws a rule under every h2; it reads as a divider mid-column
   here, so it comes off — same as the old layout did. */
.about-premium .about-intro-text h2 {
  margin: 0;
}

.about-premium .about-intro-text h2::after {
  display: none;
}

/* No measure cap: at the 1320px container the column is ~636px wide, and a
   560px cap left the paragraph stopping short of the cards under it. */
.about-premium .about-intro-lead {
  margin: 0 0 32px;
  color: var(--rhd-ink-soft);
}

/* 2x2. Cards rather than divider rules, because a shared border between
   grid cells never lands where you want it to. */
.about-premium .about-intro-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 0 0 36px;
  padding: 0;
}

.about-premium .about-intro-list li {
  padding: 22px 20px;
  background: linear-gradient(180deg, #ffffff 0%, var(--rhd-tint-05) 100%);
  border: 1px solid var(--rhd-line);
  border-radius: 16px;
  transition: transform 0.45s ease, border-color 0.45s ease;
}

/* Flat: the lift and the navy border carry the hover on their own. */
.about-premium .about-intro-list li:hover {
  transform: translateY(-4px);
  border-color: var(--rhd-navy);
}

.about-premium .about-intro-fact h5 {
  margin: 0 0 6px;
  font-family: var(--body-font);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--rhd-navy);
}

.about-premium .about-intro-fact p {
  margin: 0;
  font-size: 15px;
  line-height: 26px;
  color: var(--rhd-ink-soft);
}

.about-premium .about-intro-cta {
  margin-top: 0;
}

/* The photo column is a flex item stretched by .align-items-stretch on the
   row, so the frame fills whatever the copy column measures. No min-height:
   any floor here becomes the section's height once the copy is shorter than
   it. Square corners — no radius. */
.about-premium .about-intro-media {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--rhd-line);
}

/* Absolute, so the photo's own proportions never push the frame taller than
   the copy beside it — an in-flow img contributes its scaled natural height
   to the row and quietly sets the floor. Out of flow, the frame measures
   nothing and the copy alone decides the height. */
.about-premium .about-intro-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.about-premium .about-intro-media:hover img {
  transform: scale(1.04);
}

/* Years badge, anchored to the bottom-left corner of the photo. */
.about-premium .about-intro-badge {
  position: absolute;
  left: 24px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 22px;
  background: linear-gradient(135deg, var(--rhd-navy) 0%, var(--rhd-blue) 100%);
  box-shadow: 0 16px 36px rgba(16, 47, 96, 0.32);
}

.about-premium .about-intro-badge strong {
  font-family: var(--heading-font);
  font-size: 30px;
  line-height: 1;
  color: #ffffff;
}

.about-premium .about-intro-badge span {
  margin-top: 4px;
  font-family: var(--body-font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

/*  Responsive  */
@media only screen and (max-width: 1199px) {
  .about-premium .about-intro-lead {
    margin-bottom: 26px;
  }

  .about-premium .about-intro-list {
    gap: 16px;
  }

  .about-premium .about-intro-list li {
    padding: 18px 16px;
  }
}

/* Below 992px the columns stack and the order utilities in the markup put
   the photo first, so it leads the section as a fixed band and the copy
   follows. Nothing left to match heights with, hence the fixed height. */
@media only screen and (max-width: 991px) {
  .about-premium .about-intro-media {
    flex: none;
    min-height: 0;
    height: 400px;
    margin-bottom: 40px;
  }
}

@media only screen and (max-width: 767px) {
  /* One column: two 2x2 cells at this width would each be too narrow for
     the labels to hold a line. */
  .about-premium .about-intro-list {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .about-premium .about-intro-list li {
    padding: 18px 16px;
  }

  .about-premium .about-intro-fact h5 {
    font-size: 16px;
  }

  .about-premium .about-intro-media {
    height: 300px;
  }

  .about-premium .about-intro-badge {
    left: 16px;
    bottom: 16px;
    padding: 12px 18px;
  }

  .about-premium .about-intro-badge strong {
    font-size: 25px;
  }
}


/*----------------------------------------------------------------------
  CELEBRITY CLIENTS
  A single row of matted frames, sized like the brand wall above it so the
  two sections rhyme.

  The photos are candid phone shots in mixed aspect ratios. Cropping them
  to a common shape cut heads off, and letterboxing them inside one fixed
  frame left a fat mat on two sides and a thin one on the other two. So
  each frame takes its own photo's aspect ratio instead: the mat is then
  the same width on all four sides of every card, uncropped.

  Frames of different shapes still line up because each one grows in
  proportion to its ratio (see .celeb-card) - wider photo, wider card,
  identical height across the row.

  Every frame is a magnific-popup link - the full, uncropped photo opens in
  the lightbox. Init lives in assets/js/script.js.

  Hover does three quiet things at once: the card lifts, the photo pushes
  in slightly, and a magnifier fades up in the corner. Slow easing
  (0.5-0.7s) is what separates "premium" from "bouncy".
----------------------------------------------------------------------*/
.about-premium .celeb-area {
  position: relative;
  overflow: hidden;
  background:
    white;
}

/* Flex, not grid, for the same reason the brand wall uses it: an odd last
   row centres itself instead of stranding against the left edge. */
.about-premium .celeb-mosaic {
  --celeb-gap: 24px;
  --celeb-mat: 10px;
  --celeb-per-row: 5;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--celeb-gap);
}

/* Every card the same width and the same height.

   Uniform cards and an even mat can only both be true if the photographs
   are cropped to a common shape — a frame cut to each photo's own ratio
   is what made the widths differ before. So the window is square and the
   pictures are cropped to it, and the mat is then simply the padding:
   identical on all four sides of every card, and every card identical to
   its neighbours.

   Square is the crop that costs these photographs least. The two wide
   shots lose about 8% off the sides, the three tall ones about 20% off
   top and bottom, and nobody is cut out of the two-person frames — a
   portrait crop would have removed one of them entirely.

   The basis subtracts each card's share of the gutters: for n per row
   that is (n - 1) / n of the gap. Change --celeb-per-row and the width
   follows on its own. */
.about-premium .celeb-card {
  position: relative;
  flex: 0 0 calc(
    (100% - (var(--celeb-per-row) - 1) * var(--celeb-gap)) / var(--celeb-per-row)
  );
  max-width: calc(
    (100% - (var(--celeb-per-row) - 1) * var(--celeb-gap)) / var(--celeb-per-row)
  );
  min-width: 0;
  margin: 0;
  padding: var(--celeb-mat);
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff 0%, var(--rhd-tint-10) 100%);
  border: 1px solid var(--rhd-line);
  box-shadow: 0 2px 16px rgba(16, 47, 96, 0.06);
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 0.5s ease,
              box-shadow 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.about-premium .celeb-card:hover {
  transform: translateY(-8px);
  border-color: var(--rhd-navy);
  box-shadow: 0 22px 48px rgba(16, 47, 96, 0.18);
}

/* The window inside the mat. Its box is cut to the photo's own ratio, so
   the picture fills it edge to edge with nothing cropped and nothing
   letterboxed - the mat around it is the padding above, and only that. */
.about-premium .celeb-media {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 12px;
  cursor: zoom-in;
}

.about-premium .celeb-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.about-premium .celeb-card:hover .celeb-media img {
  transform: scale(1.04);
}

/* Magnifier badge - the only cue that the frame opens a lightbox. */
.about-premium .celeb-zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rhd-navy) 0%, var(--rhd-blue) 100%);
  color: #ffffff;
  font-size: 13px;
  opacity: 0;
  transform: translateY(8px) scale(0.9);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.about-premium .celeb-card:hover .celeb-zoom {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Optional caption. Sits under the mat rather than over the photo, so it
   never covers a face - the frames are too short for an overlay. */
.about-premium .celeb-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 14px 14px 12px;
  text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 42%);
}

.about-premium .celeb-caption .celeb-name {
  margin: 0 0 2px;
  font-family: var(--heading-font);
  font-size: 17px;
  line-height: 1.25;
  color: var(--rhd-navy);
}

.about-premium .celeb-caption .celeb-role {
  display: block;
  font-family: var(--body-font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rhd-ink-soft);
}

/* A captioned frame grows downwards to make room for the label, so the
   photo keeps its shape and its mat stays even on the other three sides. */
.about-premium .celeb-card:has(.celeb-caption) {
  padding-bottom: 52px;
}

/* Touch devices get no hover, so show the magnifier outright. */
@media (hover: none) {
  .about-premium .celeb-zoom {
    opacity: 1;
    transform: none;
  }
}

/*  Responsive
    Cards per row is one variable; the width calc above follows it.  */
@media only screen and (max-width: 1199px) {
  .about-premium .celeb-mosaic {
    --celeb-gap: 20px;
    --celeb-mat: 9px;
    --celeb-per-row: 3;
  }

  .about-premium .celeb-card {
    border-radius: 18px;
  }
}

@media only screen and (max-width: 991px) {
  .about-premium .celeb-card {
    border-radius: 16px;
  }
}

@media only screen and (max-width: 767px) {
  .about-premium .celeb-mosaic {
    --celeb-gap: 14px;
    --celeb-mat: 7px;
    --celeb-per-row: 2;
  }

  .about-premium .celeb-card {
    border-radius: 12px;
  }

  .about-premium .celeb-media {
    border-radius: 8px;
  }

  .about-premium .celeb-zoom {
    width: 30px;
    height: 30px;
    right: 8px;
    bottom: 8px;
    font-size: 11px;
  }
}
/*----------------------------------------------------------------------
  MATTRESS BRANDS
  A brand wall rather than the scattered logo collage of the deck: one
  even grid of cards, so the row reads as a set and stays predictable at
  every width. Same tokens as the rest of the page - white cards on the
  blue tint, navy type, the .svc-card lift on hover.
----------------------------------------------------------------------*/
/* Spacing comes from .py-128 in the markup, same as every other section on
   the page — no padding here, or it would override it. */
.about-premium .brand-area {
  background:
   radial-gradient(760px 320px at 12% 0%, rgba(255, 255, 255, 0.9) 0%, transparent 62%), linear-gradient(160deg, var(--rhd-tint-10) 0%, var(--rhd-tint-20) 100%) !important;
}

.about-premium .brand-lead {
  max-width: 660px;
  margin: 18px auto 0;
  color: var(--rhd-ink-soft);
}

/* Flex rather than grid: seven tiles leave an odd last row, and flex
   centres the remainder instead of stranding it against the left edge. */
.about-premium .brand-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.about-premium .brand-tile {
  position: relative;
  flex: 0 0 calc(20% - 16px);
  max-width: calc(20% - 16px);
  min-height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 16px;
  text-align: center;
  overflow: hidden;
  background:
    linear-gradient(180deg, #ffffff 0%, var(--rhd-tint-05) 100%);
  border: 1px solid var(--rhd-line);
  border-radius: var(--rhd-radius, 20px);
  box-shadow: 0 2px 16px rgba(16, 47, 96, 0.05);
  transition: transform 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease;
}

/* Navy hairline that wipes across the top edge on hover — the accent that
   makes the wall feel considered rather than a plain logo dump. */
.about-premium .brand-tile::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--rhd-navy) 0%, var(--rhd-blue-soft) 100%);
  transition: transform 0.45s ease;
}

.about-premium .brand-tile:hover {
  transform: translateY(-8px);
  border-color: var(--rhd-navy);
  box-shadow: 0 20px 44px rgba(16, 47, 96, 0.16);
}

.about-premium .brand-tile:hover::before {
  transform: scaleX(1);
}

/* Logos render in their own brand colours at all times. */
.about-premium .brand-tile img {
  max-width: 100%;
  max-height: 52px;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.45s ease;
}

/* Optical sizing, same correction the client roster makes. Every logo but
   one is a wide lockup that hits the tile's width limit long before the
   52px height cap, so it fills the tile. Centuary's artwork is square
   (442x442), which means 52px tall is also 52px wide - roughly a third of
   the area its neighbours occupy, and it read as a much smaller logo. The
   taller cap and matching tile height bring it back level. */
.about-premium .brand-tile.is-square {
  min-height: 120px;
}

.about-premium .brand-tile.is-square img {
  max-height: 76px;
}

.about-premium .brand-tile:hover img {
  transform: scale(1.04);
}

/* Fallback tile for a brand with no logo file yet. Sized to sit level
   with the logos around it. */
.about-premium .brand-tile span {
  font-family: var(--body-font);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rhd-navy);
}

.about-premium .brand-cta {
  margin-top: 48px;
}

/* This page never used .theme-btn before, so the button was still picking
   up the base theme's near-black fill while every other page renders it
   navy. Same declaration as services-premium.css / pages-premium.css. */
.about-premium .theme-btn,
.about-premium a.theme-btn {
  background: var(--rhd-navy) !important;
  color: #ffffff !important;
}

/*  Responsive  */
@media only screen and (max-width: 1199px) {
  .about-premium .brand-tile {
    flex-basis: calc(25% - 18px);
    max-width: calc(25% - 18px);
  }
}

@media only screen and (max-width: 991px) {
  .about-premium .brand-area {
    background-image:
      radial-gradient(465px 196px at 12% 0%, rgba(255, 255, 255, 0.9) 0%, transparent 62%),
      linear-gradient(160deg, var(--rhd-tint-10) 0%, var(--rhd-tint-20) 100%);
  }

  .about-premium .brand-tile {
    flex-basis: calc(33.333% - 16px);
    max-width: calc(33.333% - 16px);
    min-height: 100px;
    padding: 16px 14px;
  }

  .about-premium .brand-tile img {
    max-height: 46px;
  }
}

@media only screen and (max-width: 767px) {
  .about-premium .brand-area {
    background-image:
      radial-gradient(250px 107px at 12% 0%, rgba(255, 255, 255, 0.9) 0%, transparent 62%),
      linear-gradient(160deg, var(--rhd-tint-10) 0%, var(--rhd-tint-20) 100%);
  }

  .about-premium .brand-grid {
    gap: 16px;
  }

  .about-premium .brand-tile {
    flex-basis: calc(50% - 8px);
    max-width: calc(50% - 8px);
    min-height: 88px;
    padding: 14px 12px;
    border-radius: 12px;
  }

  .about-premium .brand-tile img {
    max-height: 40px;
  }

  .about-premium .brand-tile span {
    font-size: 14px;
    letter-spacing: 0.03em;
  }

  .about-premium .brand-cta {
    margin-top: 32px;
  }
}
/*----------------------------------------------------------------------
  SMART CURTAIN CONTROL
  Four ways to work a motorised track, from the deck's "4 Ways To Control
  Your Curtains" slide.

  Built as a rail, not as cards and not as another ruled list — the page
  already has one of those in "Where we are", and two vertical lists in a
  row would read as the same section twice. Here a single hairline runs
  horizontally through four stations, so the four options read as one
  system with four handles rather than four separate products.

  The icon boxes deliberately follow "Our Services" above: the same
  markup (.icon wrapping a .fa), the same free-standing 48px glyph in
  brand blue with no plate or ring behind it, and the same uppercase h5
  underneath in black. The white box behind each glyph is invisible on
  this white band — it exists only to punch a clean gap in the rail, so
  the line appears to pass behind the icon rather than through it.

  The rail is inset to the first and last icon centres so it starts and
  stops on a station instead of running off the edge; the small diamonds
  between stations pick up the ornament in .sub-title.

  Below 992px the rail stands up and becomes a left-hand spine — the same
  idea rotated rather than a second design.
----------------------------------------------------------------------*/
.about-premium .ctrl-area {
  position: relative;
  background: #ffffff;
}

.about-premium .ctrl-lead {
  max-width: 62ch;
  margin: 18px auto 0;
}

.about-premium .ctrl-rail {
  --ctrl-gap: 26px;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 var(--ctrl-gap);
}

/* The rail. 12.5% is the centre of the first of four equal columns, so
   the line begins and ends exactly under an icon. 37px is half the
   height of the icon box, which is what puts it on the glyph's centre. */
.about-premium .ctrl-rail::before {
  content: '';
  position: absolute;
  top: 37px;
  left: 12.5%;
  right: 12.5%;
  height: 1px;
  background: var(--rhd-line);
}

.about-premium .ctrl-step {
  position: relative;
  text-align: center;
  padding: 0 8px;
}

/* Station marker in the gutter before each step after the first. The
   translate puts its centre exactly half a gutter left of the step, so
   it stays centred when the gutter narrows at a breakpoint. */
.about-premium .ctrl-step + .ctrl-step::before {
  content: '';
  position: absolute;
  top: 37px;
  left: 0;
  width: 7px;
  height: 7px;
  transform: translate(calc(-50% - var(--ctrl-gap) / 2), -50%) rotate(45deg);
  background: var(--rhd-tint-20);
}

/* Icon box — same treatment as .service-area-2 above. The white fill is
   the mask that breaks the rail; nothing else about it is visible. */
.about-premium .ctrl-area .icon {
  position: relative;
  z-index: 1;
  width: 108px;
  height: 74px;
  margin: 0 auto 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
}

.about-premium .ctrl-area .icon .fa {
  display: inline-block;
  line-height: 1;
  transition: transform 0.4s ease;
}

.about-premium .ctrl-area .icon .fa,
.about-premium .ctrl-area .icon .fa:before {
  font-size: 48px;
  color: var(--rhd-blue);
}

/* The same 1.12 lift the service icons take on hover. Scaled on the
   glyph rather than the box, so the gap in the rail does not grow. */
.about-premium .ctrl-step:hover .icon .fa {
  transform: scale(1.12);
}

.about-premium .ctrl-body {
  position: relative;
}

/* Ghost numeral behind the title. Sets the order without spending a
   whole line of the layout on it. */
.about-premium .ctrl-num {
  position: absolute;
  top: -36px;
  left: 50%;
  z-index: 0;
  transform: translateX(-50%);
  font-family: var(--heading-font);
  font-size: 68px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--rhd-navy);
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.45s ease;
}

/* Uppercase black h5, as under every service icon on this page. Size and
   line-height come from the theme's own h5 scale. */
.about-premium .ctrl-title {
  position: relative;
  z-index: 1;
  margin: 0 0 14px;
  text-transform: uppercase;
  color: #000000;
}

.about-premium .ctrl-text {
  max-width: 30ch;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.75;
}

.about-premium .ctrl-step:hover .ctrl-num {
  opacity: 0.13;
}

/* Anyone who has asked their OS to cut motion gets the static icons,
   matching the .icons-float block in style.css. */
@media (prefers-reduced-motion: reduce) {
  .about-premium .ctrl-area .icon .fa {
    transition: none;
  }

  .about-premium .ctrl-step:hover .icon .fa {
    transform: none;
  }
}

/*  Responsive  */
@media only screen and (max-width: 1199px) {
  .about-premium .ctrl-rail {
    --ctrl-gap: 18px;
  }

  .about-premium .ctrl-text {
    max-width: 28ch;
  }
}

/* Four across cannot hold a readable measure below 992px, so the rail
   stands up: one column, the hairline running down the left through the
   icon centres, and the steps hanging off it. */
@media only screen and (max-width: 991px) {
  .about-premium .ctrl-rail {
    grid-template-columns: minmax(0, 1fr);
    gap: 38px;
  }

  .about-premium .ctrl-rail::before {
    top: 33px;
    bottom: 33px;
    left: 45px;
    right: auto;
    width: 1px;
    height: auto;
  }

  /* The gutter diamonds belong to the horizontal rail only. */
  .about-premium .ctrl-step + .ctrl-step::before {
    display: none;
  }

  .about-premium .ctrl-step {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    align-items: start;
    gap: 26px;
    padding: 0;
    text-align: left;
  }

  .about-premium .ctrl-area .icon {
    width: 90px;
    height: 66px;
    margin: 0;
  }

  .about-premium .ctrl-area .icon .fa,
  .about-premium .ctrl-area .icon .fa:before {
    font-size: 40px;
  }

  .about-premium .ctrl-num {
    top: -24px;
    left: 0;
    transform: none;
    font-size: 52px;
  }

  .about-premium .ctrl-body {
    padding-top: 6px;
  }

  .about-premium .ctrl-text {
    max-width: 56ch;
    margin: 0;
  }
}

@media only screen and (max-width: 767px) {
  .about-premium .ctrl-rail {
    gap: 30px;
  }

  .about-premium .ctrl-rail::before {
    top: 28px;
    bottom: 28px;
    left: 34px;
  }

  .about-premium .ctrl-step {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 18px;
  }

  .about-premium .ctrl-area .icon {
    width: 68px;
    height: 56px;
  }

  .about-premium .ctrl-area .icon .fa,
  .about-premium .ctrl-area .icon .fa:before {
    font-size: 34px;
  }

  .about-premium .ctrl-num {
    top: -20px;
    font-size: 44px;
  }

  .about-premium .ctrl-body {
    padding-top: 2px;
  }

  .about-premium .ctrl-title {
    margin-bottom: 10px;
  }

  .about-premium .ctrl-text {
    font-size: 14px;
  }
}

/*----------------------------------------------------------------------
  CLIENT ROSTER
  The list from the deck's "My Gives" slide — hotels, offices, developers,
  architects and design studios the work has gone to.

  A logo wall. Marks sit in a single centred run with nothing around them:
  no tile, border, fill, radius or shadow. Each is held in a slot of a
  common height and free to take whatever width its artwork needs, which
  is what lets a long horizontal mark and a round one share a line without
  boxing either.

  The marks sit in full colour at rest - these are real brands and their
  own palettes are the point. Hover lifts a mark instead of saturating it,
  so the row still answers the pointer.

  OPTICAL SIZING
  Matching logos by height alone makes round marks look small and wide
  ones look huge, because the eye compares area, not height. So the
  default cap is 58px and .is-round lifts a squarish mark to 68px. That
  10px is the whole correction; it is deliberate, not a stray value.

  WORDMARK FALLBACK
  Slots without artwork carry .is-wordmark and render the company name in
  the heading face on the same rest/hover behaviour. Swapping the <span>
  for an <img> and dropping the class is the only change needed when a
  logo arrives — mixed rows sit level because the slot, not the content,
  sets the height.
----------------------------------------------------------------------*/
.about-premium .roster-area {
  position: relative;
  background:
    radial-gradient(900px 400px at 50% 0%, var(--rhd-tint-10) 0%, transparent 68%),
    #ffffff;
}

.about-premium .roster-head {
  max-width: 60ch;
  margin: 0 auto 56px;
  text-align: center;
}

.about-premium .roster-head h2 {
  margin: 0 0 14px;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.about-premium .roster-lead {
  margin: 0;
}

/*  The wall  */
.about-premium .roster-wall {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px 62px;
  max-width: 1180px;
  margin: 0 auto;
}

/* min-height, not height — a wordmark that wraps to two lines has to be
   able to grow rather than spill out of its slot. */
.about-premium .roster-logo {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-premium .roster-logo img {
  max-height: 58px;
  max-width: 180px;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
  filter: none;
  opacity: 1;
  transition: transform 0.45s ease;
}

/* A round or near-square mark needs the extra height to carry the same
   visual weight as the horizontal ones beside it. */
.about-premium .roster-logo.is-round img {
  max-height: 68px;
}

.about-premium .roster-logo:hover img {
  transform: translateY(-3px);
}

/* Stand-in for a mark we have no artwork for. Set in the heading face so
   it reads as a wordmark rather than as a line of body copy, and given
   the same rest and hover states as a real logo. */
.about-premium .roster-logo.is-wordmark span {
  display: block;
  max-width: 230px;
  font-family: var(--heading-font);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-align: center;
  color: var(--rhd-navy);
  opacity: 1;
  transition: transform 0.45s ease;
}

.about-premium .roster-logo.is-wordmark:hover span {
  transform: translateY(-3px);
}

/* One line of sectors under the wall rather than a caption beside every
   mark — it says what kind of work this is without labelling the logos. */
.about-premium .roster-meta {
  max-width: 70ch;
  margin: 52px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--rhd-line);
  text-align: center;
  font-family: var(--body-font);
  font-size: 11px;
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rhd-ink-soft);
}

/*  Responsive  */
@media only screen and (max-width: 1199px) {
  .about-premium .roster-head {
    margin-bottom: 44px;
  }

  .about-premium .roster-wall {
    gap: 34px 46px;
  }

  .about-premium .roster-logo {
    min-height: 60px;
  }

  .about-premium .roster-logo img {
    max-height: 50px;
    max-width: 155px;
  }

  .about-premium .roster-logo.is-round img {
    max-height: 60px;
  }

  .about-premium .roster-logo.is-wordmark span {
    max-width: 200px;
    font-size: 17px;
  }

  .about-premium .roster-meta {
    margin-top: 42px;
    padding-top: 24px;
  }
}

@media only screen and (max-width: 991px) {
  .about-premium .roster-head {
    margin-bottom: 36px;
  }

  .about-premium .roster-wall {
    gap: 30px 38px;
  }
}

/* Two per row on a phone, so the marks stay big enough to recognise
   instead of shrinking to fit seven across. */
@media only screen and (max-width: 767px) {
  .about-premium .roster-wall {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 18px;
  }

  .about-premium .roster-logo {
    min-height: 54px;
  }

  .about-premium .roster-logo img {
    max-height: 44px;
    max-width: 100%;
  }

  .about-premium .roster-logo.is-round img {
    max-height: 54px;
  }

  .about-premium .roster-logo.is-wordmark span {
    max-width: none;
    font-size: 15px;
  }

  .about-premium .roster-meta {
    margin-top: 34px;
    padding-top: 22px;
    font-size: 10px;
    letter-spacing: 0.14em;
  }
}

/* Four across on a tablet, so the seven marks read as a 4 + 3 block
   rather than the ragged run the free-flowing flex wall produced. Fixed
   quarter-width slots do the gridding, and because the wall is still a
   centred flex row the short second row centres itself under the first -
   which a real four-column grid could not do without a half-column
   offset. */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about-premium .roster-wall {
    gap: 30px 38px;
  }

  .about-premium .roster-logo {
    flex: 0 0 calc((100% - 3 * 38px) / 4);
    max-width: calc((100% - 3 * 38px) / 4);
  }

  /* The 1199px cap is a fixed 155px, which would leave a wide mark
     sitting off-centre in its narrower slot here. */
  .about-premium .roster-logo img {
    max-width: 100%;
  }
}

/* Seven marks in two columns leaves the last one alone on its row, hard
   against the left edge. Spanning both columns lets the slot's own
   centring put it under the gap between the pair above. */
@media only screen and (max-width: 767px) {
  .about-premium .roster-logo:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}


/*----------------------------------------------------------------------
  WHERE WE ARE
  The four Chennai areas from the deck's "Which area is Royal Home Decors
  located?" slide.

  Four cards in a row, each a rounded icon plate over the area name. All
  four names carry equal weight — none is singled out — so the section
  reads as the areas we cover rather than as a quiz with one answer.

  Names are held to a single line (white-space: nowrap) with the card
  sized to suit the longest of them, so the row stays even. A longer
  place name than "Royapettah" will need the font size stepped down.
----------------------------------------------------------------------*/
.about-premium .find-area {
  position: relative;
  background:
   radial-gradient(760px 320px at 12% 0%, rgba(255, 255, 255, 0.9) 0%, transparent 62%), linear-gradient(160deg, var(--rhd-tint-10) 0%, var(--rhd-tint-20) 100%) !important;
}

.about-premium .find-head {
  margin-bottom: 48px;
  text-align: center;
}

.about-premium .find-head h2 {
  margin: 0;
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1.16;
  letter-spacing: -0.01em;
}

/*  The cards  */
.about-premium .find-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.about-premium .find-item {
  padding: 40px 20px 34px;
  text-align: center;
  background: linear-gradient(180deg, #ffffff 0%, var(--rhd-tint-05) 100%);
  border: 1px solid var(--rhd-line);
  border-radius: 20px;
  box-shadow: 0 2px 16px rgba(16, 47, 96, 0.06);
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 0.5s ease,
              box-shadow 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.about-premium .find-item:hover {
  transform: translateY(-8px);
  border-color: var(--rhd-navy);
  box-shadow: 0 22px 48px rgba(16, 47, 96, 0.18);
}

/* Rounded plate behind the pin. Fills with the brand gradient on hover,
   which is the only thing that changes colour in the card. */
.about-premium .find-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  background: var(--rhd-tint-20);
  color: var(--rhd-navy);
  font-size: 26px;
  transition: background 0.45s ease, color 0.45s ease,
              box-shadow 0.45s ease;
}

.about-premium .find-item:hover .find-icon {
  background: linear-gradient(135deg, var(--rhd-navy) 0%, var(--rhd-blue) 100%);
  box-shadow: 0 12px 26px rgba(16, 47, 96, 0.22);
  color: #ffffff;
}

/* One line each — the row only stays even if no name wraps. */
.about-premium .find-place {
  margin: 0;
  font-family: var(--heading-font);
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--rhd-navy);
  white-space: nowrap;
}

/*  Responsive  */
@media only screen and (max-width: 1199px) {
  .about-premium .find-head {
    margin-bottom: 38px;
  }

  .about-premium .find-row {
    gap: 18px;
  }

  .about-premium .find-item {
    padding: 32px 14px 28px;
  }

  .about-premium .find-icon {
    width: 62px;
    height: 62px;
    margin-bottom: 18px;
    border-radius: 19px;
    font-size: 23px;
  }
}

@media only screen and (max-width: 991px) {
  .about-premium .find-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

@media only screen and (max-width: 767px) {
  .about-premium .find-head {
    margin-bottom: 28px;
  }

  .about-premium .find-row {
    gap: 14px;
  }

  .about-premium .find-item {
    padding: 26px 10px 22px;
    border-radius: 16px;
  }

  .about-premium .find-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    border-radius: 16px;
    font-size: 20px;
  }

  .about-premium .find-place {
    font-size: 15px;
  }
}


/*----------------------------------------------------------------------
  FAQ CLOSING CTA
  The grid is two columns and there are now five cards, so the CTA is
  alone in the last row and was stranded in the left cell with an empty
  one beside it. It spans the full width instead and centres its
  contents, which reads as a closing panel rather than a half-empty row.
  Drops back to a single column at 767px, where every card is full width
  anyway - the centring is all that carries over.
----------------------------------------------------------------------*/
.about-premium .faq-grid .faq-card-cta {
  grid-column: 1 / -1;
  align-items: center;
  text-align: center;
}

/*  The button and the phone number sit side by side on one centred row.
    They are wrapped in .faq-cta-actions in the markup because the card
    itself is a column flex - the heading and the paragraph have to keep
    stacking, so the pair needs its own row container. Wraps to two lines
    on a narrow card rather than squeezing.  */
.about-premium .faq-grid .faq-card-cta .faq-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 28px;
}

.about-premium .faq-grid .faq-card-cta .faq-cta-actions .faq-call {
  margin: 0 !important;
}

/*  The closing card now runs the full width of the grid, so its heading
    was undersized against all that space - the 20px it shares with the
    question cards suited a half-width card, not this one.  */
.about-premium .faq-grid .faq-card-cta .faq-question {
  font-size: 32px;
  margin-bottom: 18px;
}

@media only screen and (max-width: 767px) {
  .about-premium .faq-grid .faq-card-cta .faq-question {
    font-size: 26px;
  }
}