/* ===========================================================================
   Asian Renovations - overrides on top of the theme stylesheet.
   Keep every change in this file so style.css stays untouched and upgradable.
   Loaded last, after style.css.
   =========================================================================== */

/* The off-canvas mobile panel is parked off-screen to the right, which gives
   the document a horizontal scrollbar on phones. `clip` trims it without
   turning the root into a scroll container, which `hidden` would do and which
   breaks sticky positioning and in-page anchors. */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}
@supports (overflow-x: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

/* The theme's custom circular drag-cursor is removed in the markup (see the
   site builder); this is just a safety net plus restoring the normal
   pointer anywhere the theme set cursor:none. */
.mouseCursor { display: none !important; }
.tp-cursor-point-area { cursor: auto !important; }

/* =============================================================================
   HEADER - logo left, menu centred, logo scaled down ~30%, and a transparent
   variant (.absolute-header, added by the builder) so it can float over the
   full-bleed hero and turn solid white once the page scrolls.
   ========================================================================= */
.header-area .header-inner-box {
  justify-content: space-between;
}
.header-area .header-inner-box .logo {
  order: 1;
}
.header-area .header-inner-box .main-menu {
  order: 2;
  flex: 1 1 auto;
  justify-content: center;
}
/* Bootstrap's d-none/d-lg-block utility classes handle show/hide by
   breakpoint; only add flex centring once that utility has switched it on,
   so mobile (where it is display:none) is never forced back open. */
@media (min-width: 992px) {
  .header-area .header-inner-box .main-menu {
    display: flex !important;
  }
  /* style.css only hides the hamburger above 1199px, so from 992-1199px
     both the full nav AND the hamburger were showing at once. The full
     nav already covers that range - the hamburger is a redundant second
     way in, not a fallback. */
  .header-area .header-inner-box .mobile-nav-bar,
  .header-area #hamburger {
    display: none !important;
  }
}
.header-area .header-inner-box .header-right {
  order: 3;
}
/* Mobile nav bar (hamburger) has no order of its own in the theme, so it
   defaults to 0 and floats ahead of the logo. Push it after, so the logo
   stays left and the hamburger sits on the right, same as desktop. */
.header-area .header-inner-box .mobile-nav-bar {
  order: 3;
}

/* Logo file ships edge-to-edge with no padding baked in, so it has to be
   sized down (not just centred) to leave real breathing room top/bottom in
   the nav bar - at 250px wide it was nearly as tall as the 90px-high bar
   itself and touched both edges. */
.header-area .header-inner-box .logo img {
  width: 190px;
  height: auto;
}
/* The logo link is a plain inline <a>, so its <img> sits on the text
   baseline - that leaves a visible gap below it and pushes the mark toward
   the top of the (taller) nav bar instead of sitting centred in it. */
.header-area .header-inner-box .logo .navbar-brand {
  display: flex;
  align-items: center;
  height: 100%;
}
@media (max-width: 767px) {
  .header-area .header-inner-box .logo img {
    width: 140px;
  }
  /* The theme fixes both the nav bar and the logo box at their desktop
     heights (100px / 90px) on every breakpoint, which reads as a lot of
     dead space above a 375px-wide screen. Trim it down on mobile. */
  .header-area .navigation {
    height: 70px;
  }
  .header-area .header-inner-box .logo {
    height: 70px;
  }
}

/* Transparent-over-hero state. Text is white until the page scrolls; the
   theme's own #header-sticky.header-sticky class (added by main.js past
   400px of scroll) then gets a solid header instead of the theme's default
   near-black, and every element inside flips back to dark text. The ID
   chain keeps these selectors safely more specific than the theme's. */
#header-1.header-area.absolute-header #header-sticky.header-sticky {
  background: #fff;
  box-shadow: 0 8px 24px rgba(149, 157, 165, 0.2);
}
#header-1.header-area.absolute-header #header-sticky.header-sticky .main-menu ul > li > a,
#header-1.header-area.absolute-header #header-sticky.header-sticky .search-trigger i,
#header-1.header-area.absolute-header #header-sticky.header-sticky .contact-number .title h4 {
  color: #1D1D1D;
}
#header-1.header-area.absolute-header #header-sticky.header-sticky .menu-trigger span {
  background: #1D1D1D;
}
/* style.css forces #hamburger i white whenever .absolute-header is present
   on the header, with no allowance for the sticky (scrolled, solid white
   background) state - so on mobile, where #hamburger is the only visible
   menu trigger, it goes white-on-white and disappears the moment you
   scroll. Force it dark again once the header has gone solid. */
#header-1.header-area.absolute-header #header-sticky.header-sticky #hamburger i {
  color: #1D1D1D;
}
#header-1.header-area.absolute-header #header-sticky.header-sticky .logo .logo-dark {
  opacity: 1;
}
#header-1.header-area.absolute-header #header-sticky.header-sticky .logo .logo-light {
  opacity: 0;
}

/* Two logos stacked so the swap is pure CSS, no scroll-position JS needed
   beyond the theme's existing header-sticky toggle. */
.header-area .header-inner-box .logo {
  position: relative;
}
.logo .logo-light,
.logo .logo-dark {
  transition: opacity 0.3s ease;
}
.logo .logo-dark {
  opacity: 0;
}
.logo .logo-light {
  opacity: 1;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
/* Solid (non-transparent) header pages never show the light logo */
.header-area:not(.absolute-header) .logo .logo-dark { opacity: 1; }
.header-area:not(.absolute-header) .logo .logo-light { opacity: 0; }

/* =============================================================================
   HERO - single full-bleed image, right to the top of the viewport, headline
   overlaid. The transparent header (above) floats on top of it.
   ========================================================================= */
.hero-full {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.hero-full img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the tiled floor - the actual point of the photo on a tiling company's
     site - sits in the lower half of the source image; a lower bias here
     was cropping it out and leaving just wall and sofa on desktop. */
  object-position: center 75%;
}
/* Once there are 2+ photos, Owl Carousel wraps them in its own stage
   structure. Owl slides by floating every .owl-item side by side into one
   wide horizontal strip (.owl-stage) and then translateX-ing that strip -
   forcing .owl-stage/.owl-item to position:absolute (as an earlier version
   of this rule did) collapses every slide onto the same spot, so Owl's
   own transform then shoves the entire identical stack off-screen
   together and the hero goes blank. Only the outer viewport
   (.owl-stage-outer, which Owl already clips with overflow:hidden) gets
   the full-bleed absolute treatment; the stage and items keep Owl's own
   position:relative/float:left and just need height:100% so the
   full-bleed <img> inside (position:absolute per the rule above) has a
   real box to fill instead of collapsing to Owl's 1px min-height. */
.hero-full .hero-slider-wrap,
.hero-full .hero-slider-wrap .owl-stage-outer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-full .hero-slider-wrap .owl-stage,
.hero-full .hero-slider-wrap .owl-item {
  height: 100%;
}
/* YouTube video hero: the <iframe> has no intrinsic full-bleed sizing of
   its own (unlike <img>, object-fit doesn't apply to iframes), so it was
   rendering at the browser default ~300x150 instead of covering the hero.
   Standard "video background" cover trick: size it by viewport width/height
   using the video's 16:9 ratio, oversizing in whichever dimension is
   needed so it always overflows the hero, then re-center and clip via the
   parent's overflow:hidden. */
.hero-video-embed {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-video-embed iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw; /* 16:9 */
  min-height: 100vh;
  min-width: 177.78vh; /* 16:9 */
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}
.hero-full .single-slider-item {
  position: relative;
  width: 100%;
  height: 100%;
}
/* The no-carousel fallback (0 or 1 slide) puts .single-slider-item directly
   under .hero-full with no owl wrapper around it. .hero-full only has
   min-height (not height), and its <img> is position:absolute so it can't
   contribute to auto-height either - the rule above then resolves height:100%
   to 0 against an indefinite parent, collapsing the whole hero to a blank
   scrim. Only a direct child of .hero-full is ever this fallback case (the
   carousel's own .single-slider-item is nested inside .hero-slider-wrap /
   .owl-stage / .owl-item), so this can safely just fill the hero directly. */
.hero-full > .single-slider-item {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* style.css hardcodes #home-3 .single-slider-item img to a fixed 600px
   (its own single-image hero was never meant to be full-bleed) - that ID
   selector otherwise beats our class-only rule above and crops the photo
   to the top 600px of the section, leaving the rest of the hero blank. */
#home-3.hero-full .single-slider-item img {
  height: 100%;
}
@media (max-width: 767px) {
  .hero-full img {
    /* the source is a tall portrait shot; favour the floor and sofa over
       the ceiling once the crop gets narrow */
    object-position: center 20%;
  }
}
.hero-full__scrim {
  position: absolute;
  inset: 0;
  /* Two layers: a flat overall darken so the headline stays readable no
     matter how light the hero photo is, plus a left-side gradient for extra
     depth behind the text block. */
  background:
    linear-gradient(100deg, rgba(8, 7, 5, 0.62) 0%, rgba(8, 7, 5, 0.44) 42%, rgba(8, 7, 5, 0.12) 72%, rgba(8, 7, 5, 0) 100%),
    rgba(6, 5, 4, 0.22);
}
.hero-full__in {
  position: relative;
  z-index: 2;
  width: 100%;
}
.hero-full__content {
  max-width: 640px;
  padding-top: 90px;
}
.hero-full__content h1 {
  color: #fff;
  font-size: 58px;
  line-height: 1.14;
  margin-bottom: 20px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}
.hero-full__content p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 17px;
  max-width: 46ch;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
}
.hero-full__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 10px;
}
.btn-outline-white {
  display: inline-block;
  padding: 15px 34px;
  border: 2px solid #fff;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  background: transparent;
  transition: all 0.3s ease;
}
.btn-outline-white:hover {
  background: #fff;
  color: #111;
}
@media (max-width: 1199px) {
  .hero-full__content h1 { font-size: 46px; }
}
@media (max-width: 767px) {
  .hero-full { min-height: 88vh; align-items: flex-end; padding-bottom: 60px; }
  .hero-full__scrim {
    background:
      linear-gradient(to top, rgba(8, 7, 5, 0.86) 0%, rgba(8, 7, 5, 0.6) 45%, rgba(8, 7, 5, 0.16) 80%),
      rgba(6, 5, 4, 0.22);
  }
  .hero-full__content { max-width: 100%; padding-top: 0; }
  .hero-full__content h1 { font-size: 34px; }
  .hero-full__cta { gap: 12px; }
  .btn-outline-white { padding: 12px 26px; font-size: 14px; }
  /* Bootstrap's default .container gutter (12px each side) reads as text
     running edge to edge on a phone screen. Give the hero copy real
     margins here without touching .container everywhere else. */
  .hero-full__in { padding-left: 24px; padding-right: 24px; }
}

/* =============================================================================
   NAV DROPDOWN - the theme draws a small horizontal dash bar (::before) in
   front of the active service, padding the whole row left to make room for
   it. That dash-plus-shifted-text reads as visual noise ("--") rather than a
   real active state. Bold + underline the label instead; no shifted layout.
   ========================================================================= */
.main-menu ul > li > ul {
  width: 260px;
}
.main-menu ul > li > ul li a {
  white-space: nowrap;
}
/* Down-arrow indicator on nav items that carry a dropdown - a real <i>
   icon injected by the builder (see buildNav in site.js), not CSS content,
   so it always uses a glyph that's actually in the icon font. */
.main-menu ul > li > a.navlink .la-angle-down {
  font-size: 11px;
  margin-left: 6px;
}
.main-menu ul > li > ul li a.active {
  padding-left: 25px;
  font-weight: 600 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.main-menu ul > li > ul li a.active:before {
  content: none;
}
.main-menu ul > li > ul li a:hover {
  font-weight: 600 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* "All Services" sits first in the dropdown, set apart with a hairline so it
   reads as the escape hatch out of the list rather than another service. */
.main-menu ul > li > ul li:first-child a {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 4px;
  padding-bottom: 14px;
}

/* =============================================================================
   SERVICE TILES (home page) - four highlighted services, overlay-card style:
   full-bleed photo, a white rounded card floating centred on top carrying a
   small coloured eyebrow and the service name. Double the old tile gap and a
   smaller, more square tile than the theme's stretched four-across row.
   ========================================================================= */
/* The theme markup has no Bootstrap .container around this row (that's why
   it used to run edge to edge); the builder now wraps .tile-grid in one so
   it picks up the same gutters and centred max-width as every other
   section on the page. */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px 20px;
}
.tile-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(20, 16, 8, 0.12);
}
.tile-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.tile-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.16) 100%);
}
.tile-card:hover img {
  transform: scale(1.07);
}
/* Slim label bar pinned to the bottom of the tile. The previous version was
   a tall centred card that covered the middle third of every photo; this
   keeps the same idea but hands most of the tile back to the image. */
.tile-card__panel {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  background: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 10px 24px rgba(20, 16, 8, 0.16);
  transition: transform 0.4s ease;
}
.tile-card:hover .tile-card__panel {
  transform: translateY(-3px);
}
.tile-card__eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.4px;
  color: #FEC828;
  margin-bottom: 2px;
  line-height: 1.3;
}
.tile-card__title {
  display: block;
  font-family: "Jost", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.25;
  color: #1D1D1D;
}
@media (max-width: 991px) {
  .tile-grid { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
}
@media (max-width: 575px) {
  .tile-grid { grid-template-columns: repeat(2, 1fr); gap: 12px 10px; }
  .tile-card__panel { left: 8px; right: 8px; bottom: 8px; padding: 9px 10px; }
  .tile-card__title { font-size: 14px; }
  .tile-card__eyebrow { font-size: 10px; }
}

/* =============================================================================
   ABOUT - the client photo as a proper square, sized to hold its own next to
   the text column rather than shrinking down to a strip.
   ========================================================================= */
/* The text column (.about-content-wrap) has no width of its own - the theme
   carves out its right-hand gap purely by taking this image out of flow
   with position:absolute + left:50%. Keep that positioning (removing it
   would collapse the two-column layout) but override its height:100%,
   which is what was stretching the photo tall - let aspect-ratio size it
   as a proper square instead. The id-qualified selector matches the
   theme rule's specificity so this override actually wins. */
#about-3 .video-content-wrap.video-content-wrap--photo {
  width: 46%;
  max-width: 460px;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(20, 16, 8, 0.14);
}
.video-content-wrap--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 991px) {
  #about-3 .video-content-wrap.video-content-wrap--photo {
    width: 100%;
    max-width: 420px;
    margin: 30px auto 0;
  }
}

/* =============================================================================
   TESTIMONIALS - three review cards instead of the theme's single-quote
   carousel, plus a link out to the live Google reviews.
   ========================================================================= */
.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.review-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 14px;
  padding: 30px 28px;
}
.review-card__stars {
  color: #FEC828;
  font-size: 13px;
  letter-spacing: 3px;
  margin-bottom: 14px;
}
.review-card__text {
  font-size: 15px;
  line-height: 1.7;
  color: #4A4A4A;
  min-height: 100px;
}
.review-card__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}
.review-card__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #1D1D1D;
  color: #fff;
  font-weight: 600;
  flex: none;
}
.review-card__author b {
  display: block;
  font-size: 15px;
  color: #1D1D1D;
}
.review-card__author span span {
  font-size: 13px;
  color: #8A8A8A;
}
.review-grid__more {
  text-align: center;
  margin-top: 34px;
}
@media (max-width: 991px) {
  .review-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* =============================================================================
   FOOTER - real multi-column footer used on every page.
   ========================================================================= */
.site-footer {
  background: #14110C;
  color: rgba(255, 255, 255, 0.72);
  padding-top: 80px;
}
.site-footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 40px;
  padding-bottom: 60px;
}
.site-footer__logo {
  display: inline-block;
  margin-bottom: 18px;
}
.site-footer__logo img {
  width: 210px;
  height: auto;
}
.site-footer__brand p {
  font-size: 15px;
  line-height: 1.7;
  max-width: 32ch;
  margin-bottom: 22px;
}
.site-footer__social {
  display: flex;
  gap: 10px;
}
.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.site-footer__social a:hover {
  background: #FEC828;
  border-color: #FEC828;
}
.site-footer__col h6 {
  color: #fff;
  font-size: 16px;
  margin-bottom: 22px;
}
.site-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer__col ul li {
  margin-bottom: 12px;
}
.site-footer__col ul a {
  color: rgba(255, 255, 255, 0.68);
  font-size: 15px;
  transition: color 0.3s ease, padding-left 0.3s ease;
}
.site-footer__col ul a:hover {
  color: #FEC828;
  padding-left: 4px;
}
.site-footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.6;
}
.site-footer__contact li i {
  color: #FEC828;
  margin-top: 4px;
  flex: none;
}
.site-footer__contact a {
  color: rgba(255, 255, 255, 0.68);
  transition: color 0.3s ease;
}
.site-footer__contact a:hover {
  color: #FEC828;
}
.site-footer__cta {
  display: inline-block;
  margin-top: 22px;
}
.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 22px 0;
}
.site-footer__bottom p {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}
.site-footer__bottom p + p {
  margin-top: 8px;
}
.site-footer__bottom a {
  color: rgba(255, 255, 255, 0.68);
  transition: color 0.3s ease;
}
.site-footer__bottom a:hover {
  color: #FEC828;
}
@media (max-width: 991px) {
  .site-footer__top {
    grid-template-columns: 1fr 1fr;
    row-gap: 40px;
  }
}
@media (max-width: 575px) {
  .site-footer__top {
    grid-template-columns: 1fr;
  }
  /* Same edge-to-edge issue as the hero: Bootstrap's default .container
     gutter is only 12px, which reads as the whole footer hugging the left
     edge on a phone screen. */
  .site-footer .container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* =============================================================================
   SECTION BACKGROUND RHYTHM - the whole site was one flat white, so nothing
   ever separated visually. A very light warm-grey tint on alternating
   sections gives the page some depth without turning it into a patchwork -
   subtle enough to read as "next section", not as a colour change.
   ========================================================================= */
.section-tint {
  background: #F7F5F2;
}
.section-tint-deep {
  background: #F1EEE8;
}
/* wrapper the builder adds around the FAQ accordion block on services.html,
   so it reads as its own band rather than an unbroken continuation */
.svc-faq-band {
  padding-block: 60px;
  margin-top: 40px;
}
.contact-info-wrap {
  padding: 50px 0;
}
@media (max-width: 767px) {
  .svc-faq-band { padding-block: 40px; }
}

/* =============================================================================
   HOME "REAL JOBS, REAL PHOTOS" - a fixed 2x4 grid, not a carousel.
   ========================================================================= */
.work-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  width: 100%;
}
.work-grid__item {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(20, 16, 8, 0.1);
}
.work-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.work-grid__item:hover img {
  transform: scale(1.06);
}
.work-grid__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 14px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent);
}
@media (max-width: 991px) {
  .work-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575px) {
  .work-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* =============================================================================
   FLOATING WHATSAPP BUTTON
   ========================================================================= */
.whatsapp-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 998;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.whatsapp-fab:hover {
  color: #fff;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.5);
}
@media (max-width: 767px) {
  .whatsapp-fab {
    width: 50px;
    height: 50px;
    right: 16px;
    bottom: 16px;
    font-size: 24px;
  }
}

/* Mobile hamburger menu - WhatsApp CTA replacing the redundant "Contact
   Us" button (the nav list right above it already links to contact.html). */
.whatsapp-btn-full {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: #25D366;
  border-radius: 10px;
  padding: 12px 16px;
  color: #fff;
  white-space: nowrap;
}
.whatsapp-btn-full:hover {
  background: #1EBE5A;
  color: #fff;
}
.whatsapp-btn-full i.fa-brands {
  font-size: 20px;
  flex: none;
}
.whatsapp-btn-full b {
  font-size: 14px;
  font-weight: 600;
  flex: 1 1 auto;
  text-align: left;
}
.whatsapp-btn-full__dot {
  position: relative;
  width: 9px;
  height: 9px;
  margin-left: 6px;
  border-radius: 50%;
  background: #fff;
  flex: none;
}
.whatsapp-btn-full__dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  animation: whatsapp-dot-ping 1.6s ease-out infinite;
}
@keyframes whatsapp-dot-ping {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Service tiles are wrapped in a link so the whole card is clickable. */
a.service-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
a.service-link:hover {
  color: inherit;
}

/* Services page: five across on desktop, and the tiles keep a square-ish crop
   so the two rows read evenly. */
.service-page .single-service-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Our Work: filter menu (wired to the theme's own isotope setup). */
.work-filter-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0 0 34px;
}
.work-filter-menu a {
  display: inline-block;
  padding: 9px 20px;
  border-radius: 30px;
  font-size: 14px;
  color: #4A4A4A;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.work-filter-menu a:hover {
  color: #1D1D1D;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}
.work-filter-menu a.active {
  background: #1D1D1D;
  color: #fff;
  box-shadow: none;
}

/* Our Work: the gallery is portrait phone photography, so give every card the
   same frame instead of letting mixed crops stagger the grid. */
.project-wrapper .single-project-item .project-bg {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.project-wrapper .single-project-item .project-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project-wrapper > [class*="col-"] {
  margin-bottom: 24px;
}

/* Contact: the embedded map is a service-area view, not a shopfront pin. */
.google-map iframe {
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 0;
}

/* The template video block on About is now a still image. */
.video-content-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ------------------------------------------------- service detail page extras
   What This Involves / The Problem / How We Solve It / Why It Matters, then
   a small real-photo gallery tagged to this exact service. */
.svc-section-heading {
  font-size: 20px;
  font-weight: 600;
  color: #1D1D1D;
  margin: 34px 0 12px;
}
.service-details-wrap > h4.svc-section-heading:first-of-type,
.service-details-wrap > h1 + h5 + h4.svc-section-heading {
  margin-top: 22px;
}
.service-details-wrap > h5 {
  color: #8A8A8A;
  font-size: 16px;
  font-weight: 400;
  margin-top: 8px;
}
.svc-gallery {
  margin-top: 10px;
}
.svc-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 16px;
}
.svc-gallery__item {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(20, 16, 8, 0.1);
}
.svc-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.svc-gallery__item:hover img {
  transform: scale(1.06);
}
@media (max-width: 575px) {
  .svc-gallery__grid { grid-template-columns: repeat(2, 1fr); }
}

/* The theme anchors breadcrumb photos to their bottom edge
   (background-position: center bottom). Our source photos are phone shots,
   so whatever happens to be at the very bottom of the frame (a railing, a
   shadow, a dark grout line) lands right on the boundary with the section
   below it - on at least one job photo that produced a solid black seam.
   Centring the crop is safe for every photo instead. */
.breadcrumb-area {
  background-position: center center;
}

/* Breadcrumb subtext, under the h1 on service pages */
.breadcrumb-title p.breadcrumb-sub {
  color: rgba(255, 255, 255, 0.85);
  font-size: 17px;
  max-width: 46ch;
  margin: 14px auto 0;
}

.service-point-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 30px;
}
.service-point-list li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(0, 0, 0, .07);
  font-size: 16px;
  line-height: 1.55;
}
.service-point-list li:last-child { border-bottom: 0; }
.service-point-list li i {
  color: #FEC828;
  font-size: 15px;
  margin-top: 5px;
  flex: none;
}

.service-list-widget {
  background: #F6F6F6;
  padding: 30px;
  margin-bottom: 30px;
}
.service-list-widget h5 { margin-bottom: 18px; }
.service-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.service-nav-list li { border-bottom: 1px solid rgba(0, 0, 0, .08); }
.service-nav-list li:last-child { border-bottom: 0; }
.service-nav-list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  font-size: 16px;
  color: #1D1D1D;
  transition: color .3s ease, padding-left .3s ease;
}
.service-nav-list li a i {
  font-size: 13px;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .3s ease, transform .3s ease;
}
.service-nav-list li a:hover,
.service-nav-list li.active > a {
  color: #FEC828;
  padding-left: 8px;
}
.service-nav-list li a:hover i,
.service-nav-list li.active > a i {
  opacity: 1;
  transform: translateX(0);
}

/* Counter labels are longer than the theme's one-word demo labels. */
.single-counter-box h6 {
  white-space: normal;
  line-height: 1.35;
}

@media (max-width: 991px) {
  .google-map iframe { min-height: 300px; }
}

/* the raw <select> before nice-select.js enhances it client-side, so there
   is no flash of an unstyled dropdown */
.subimit-form-wrap select,
.sidebar-wrap .contact-form select {
  width: 100%;
  border: none;
  border-bottom: 1px solid #ddd;
  margin-bottom: 30px;
  padding: 10px 0;
  background: transparent;
}
.nice-select {
  width: 100%;
  border: none !important;
  border-bottom: 1px solid #ddd !important;
  border-radius: 0 !important;
  margin-bottom: 30px;
  padding-left: 0 !important;
  height: auto !important;
  line-height: 2.4 !important;
}
.nice-select .list { width: 100%; }

/* =============================================================================
   COUNTER STRIP - the theme sizes these numbers at 70px with a 50px bottom
   margin each, which made the stats band taller than the hero on some
   screens. Scaled down to a compact strip.
   ========================================================================= */
.counter-section.section-tint {
  padding-top: 26px;
  padding-bottom: 26px;
}
.counter-section .single-counter-box {
  margin-bottom: 0;
}
.counter-section .single-counter-box p.counter-number,
.counter-section .single-counter-box p.counter-number span {
  font-size: 30px;
  line-height: 1.1;
  padding-bottom: 2px;
}
.counter-section .single-counter-box h6 {
  font-size: 13px;
  margin-top: 4px;
}
@media (max-width: 991px) {
  .counter-section.section-tint { padding-top: 20px; padding-bottom: 20px; }
  .counter-section .single-counter-box { margin-bottom: 16px; }
  .counter-section .single-counter-box p.counter-number,
  .counter-section .single-counter-box p.counter-number span { font-size: 26px; }
  .counter-section .single-counter-box h6 { font-size: 12px; }
}
/* On phones the theme's row wraps each stat onto its own line (3 stacked
   rows of "2 up"). Force all four into one row instead. */
@media (max-width: 575px) {
  .counter-section .row { flex-wrap: nowrap; }
  .counter-section .row > div {
    flex: 1 1 0;
    max-width: none;
    width: auto;
    padding-left: 4px;
    padding-right: 4px;
  }
  .counter-section .single-counter-box { margin-bottom: 0; }
  .counter-section .single-counter-box p.counter-number,
  .counter-section .single-counter-box p.counter-number span { font-size: 19px; }
  .counter-section .single-counter-box h6 { font-size: 9.5px; margin-top: 2px; }
}

/* =============================================================================
   PAGE BANNER - 70px headings pushed longer service names ("Leaking Balcony
   Repair") onto two lines and left the band cramped. Smaller type, room to
   breathe, and it stays on one line down to tablet.
   ========================================================================= */
.breadcrumb-area {
  height: auto;
  min-height: 440px;
  padding: 200px 0 70px;
}
/* One fixed darkening strength on every breadcrumb band (see site.js,
   which strips whatever overlay-N class the template shipped with and
   applies this instead) so text contrast reads the same page to page,
   regardless of how bright the underlying photo is. */
.breadcrumb-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
}
.breadcrumb-area .breadcrumb-title {
  margin-top: 0;
  padding-inline: 15px;
}
.breadcrumb-area .breadcrumb-title h1 {
  font-size: 46px;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .breadcrumb-area .breadcrumb-title h1 { font-size: 52px; }
}
@media (max-width: 991px) {
  .breadcrumb-area { min-height: 340px; padding: 165px 0 55px; }
  .breadcrumb-area .breadcrumb-title h1 { font-size: 34px; }
}
@media (max-width: 575px) {
  .breadcrumb-area { min-height: 300px; padding: 150px 0 48px; }
  .breadcrumb-area .breadcrumb-title h1 { font-size: 28px; }
  .breadcrumb-title p.breadcrumb-sub { font-size: 15px; }
}

/* The "Get A Quote" CTA sits in a text-md-end column that only right-aligns
   from md up; below that it was a small pill jammed straight under the
   intro paragraph with barely any breathing room before the filter row. */
@media (max-width: 767px) {
  .project-section .col-md-5.text-md-end {
    margin-top: 20px;
    margin-bottom: 40px;
  }
  .project-section .col-md-5.text-md-end .theme-btn {
    display: flex;
    justify-content: center;
  }
}

/* =============================================================================
   OUR WORK - 3:4 photos, three across, caption under the image (not a card
   sitting on top of it), each opening a full screen fancyBox gallery.
   ========================================================================= */
.job-card {
  margin: 0 0 30px;
}
.job-card__media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  background: #eee;
}
.job-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.job-card__media:hover img {
  transform: scale(1.06);
}
.job-card__zoom {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  background: rgba(20, 16, 8, 0.35);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.job-card__media:hover .job-card__zoom,
.svc-gallery__item:hover .job-card__zoom,
.tools-grid__item:hover .job-card__zoom {
  opacity: 1;
}
.job-card__cap {
  padding-top: 12px;
}
.job-card__cap b {
  display: -webkit-box;
  font-family: "Jost", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #1D1D1D;
  line-height: 1.35;
  /* Admin form caps title/caption length, but this clamp is a second
     line of defence so the grid can never distort - a stray long value
     (edited straight in the DB, say) truncates with an ellipsis instead
     of pushing the card taller than its neighbours. */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.job-card__cap span {
  display: -webkit-box;
  font-size: 13px;
  color: #8A8A8A;
  line-height: 1.45;
  margin-top: 2px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 575px) {
  .job-card { margin-bottom: 20px; }
  .job-card__cap b { font-size: 13px; }
  .job-card__cap span { font-size: 12px; }
}

/* =============================================================================
   SERVICES PAGE - proper cards: 3:4 photo, name, one line of description and
   a read-more, three across. Replaces ten bare thumbnails squeezed five wide.
   ========================================================================= */
.service-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px 28px;
}
.service-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(20, 16, 8, 0.08);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 38px rgba(20, 16, 8, 0.14);
}
.service-card__media {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.service-card:hover .service-card__media img {
  transform: scale(1.06);
}
.service-card__body {
  display: block;
  padding: 22px 22px 24px;
}
.service-card__title {
  display: block;
  font-family: "Jost", sans-serif;
  font-size: 19px;
  font-weight: 600;
  color: #1D1D1D;
  line-height: 1.3;
}
.service-card__text {
  display: block;
  font-size: 14.5px;
  line-height: 1.6;
  color: #6E6E6E;
  margin-top: 8px;
}
.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 500;
  color: #FEC828;
}
.service-card__link i {
  transition: transform 0.3s ease;
}
.service-card:hover .service-card__link i {
  transform: translateX(4px);
}
@media (max-width: 991px) {
  .service-card-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 20px; }
}
@media (max-width: 575px) {
  .service-card-grid { grid-template-columns: 1fr; gap: 22px; }
  .service-card__media { aspect-ratio: 4 / 3; }
}

/* =============================================================================
   ABOUT PAGE
   ========================================================================= */
.about-photo {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(20, 16, 8, 0.14);
  aspect-ratio: 3 / 4;
}
/* Extra breathing room between the text and photo columns - Bootstrap's
   default row gutter (24px) reads as cramped at this column width. */
#about-3 .row {
  --bs-gutter-x: 4.5rem;
}
@media (max-width: 991px) {
  #about-3 .row { --bs-gutter-x: 1.5rem; }
}
.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-service-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 40px;
}
.about-service-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 4px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
  font-size: 17px;
  color: #1D1D1D;
  transition: color 0.3s ease, padding-left 0.3s ease;
}
.about-service-list a i {
  font-size: 13px;
  color: #FEC828;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.about-service-list a:hover {
  color: #FEC828;
  padding-left: 8px;
}
.about-service-list a:hover i {
  opacity: 1;
  transform: translateX(0);
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.why-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 12px;
  padding: 30px 28px;
}
.why-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #FBF3E6;
  color: #FEC828;
  font-size: 24px;
  margin-bottom: 18px;
}
.why-card h5 {
  font-size: 19px;
  margin-bottom: 10px;
}
.why-card p {
  font-size: 15px;
  line-height: 1.65;
  color: #6E6E6E;
  margin: 0;
}
.tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.tools-grid__item {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(20, 16, 8, 0.1);
}
.tools-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.tools-grid__item:hover img {
  transform: scale(1.06);
}
@media (max-width: 991px) {
  .about-service-list { grid-template-columns: 1fr; gap: 0; }
  .why-grid { grid-template-columns: 1fr; }
  .tools-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* =============================================================================
   CONTACT PAGE - details on the left, form card on the right, map its own band
   ========================================================================= */
.contact-detail-list {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
}
.contact-detail-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.contact-detail-list li:last-child {
  border-bottom: 0;
}
.contact-detail__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: #FBF3E6;
  color: #FEC828;
  font-size: 19px;
}
.contact-detail__label {
  display: block;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #9A9A9A;
  margin-bottom: 3px;
}
.contact-detail__body {
  font-size: 16.5px;
  color: #1D1D1D;
  line-height: 1.5;
}
.contact-detail__body a {
  color: #1D1D1D;
  transition: color 0.3s ease;
}
.contact-detail__body a:hover {
  color: #FEC828;
}
.contact-form-card {
  background: #F7F5F2;
  border-radius: 14px;
  padding: 40px;
}
.contact-form-card form {
  margin-top: 28px !important;
}
.contact-form-card input,
.contact-form-card textarea,
.contact-form-card .nice-select {
  background: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 8px !important;
  padding: 13px 16px !important;
  margin-bottom: 18px !important;
  width: 100%;
}
.contact-form-card textarea {
  min-height: 160px !important;
  resize: vertical;
}
.contact-form-card .nice-select {
  line-height: 1.6 !important;
  padding-left: 16px !important;
  height: auto !important;
}
.contact-form-card input[type="submit"] {
  background: #FEC828 !important;
  border-color: #FEC828 !important;
  color: #fff;
  width: auto;
  min-width: 180px;
  cursor: pointer;
  margin-bottom: 0 !important;
  transition: background 0.3s ease;
}
.contact-form-card input[type="submit"]:hover {
  background: #d49f4d !important;
}
.contact-map-section {
  padding: 90px 0;
}
.contact-map-section .google-map iframe {
  width: 100%;
  min-height: 460px;
  border: 0;
  border-radius: 12px;
  filter: grayscale(1);
  position: static;
  z-index: auto;
  max-width: 100%;
}
@media (max-width: 991px) {
  .contact-form-card { padding: 28px 22px; }
  .contact-map-section { padding: 60px 0; }
  .contact-map-section .google-map iframe { min-height: 320px; }
}

/* =============================================================================
   SERVICE DETAIL - the four sections are now an accordion, and the gallery
   moves to 3:4 to match the rest of the site.
   ========================================================================= */
.svc-accordion {
  margin-top: 26px;
}
.svc-accordion .accordion-body .service-point-list {
  margin-top: 16px;
  margin-bottom: 4px;
}
.svc-gallery__item {
  position: relative;
  aspect-ratio: 3 / 4;
}

/* =============================================================================
   BRAND COLOUR - style.css is never edited directly, so its own hardcoded
   uses of the old gold (#E6AF5D) are overridden here instead, to the new
   yellow (#FEC828) that matches the tile in the logo mark. Everything WE
   generate already uses #FEC828 (see the sed pass over this file); these
   are the theme's own base rules that sit underneath it.
   ========================================================================= */
.theme-btn, .dark-btn, .white-btn, .bordered-btn {
  background: #FEC828;
  border-color: #FEC828;
}
.bordered-btn:hover {
  background: #FEC828;
  border-color: #FEC828;
}
input[type="submit"], button[type="submit"] {
  background: #FEC828;
  border-color: #FEC828;
}
.contact-list-item li i {
  color: #FEC828;
}
.section-title span {
  color: #FEC828;
}

/* =============================================================================
   STORIES - horizontal row of tap-to-play circles (Instagram Stories style),
   see inc/stories_row.php for the markup and inc/footer.php for the shared
   modal player these open into.
   ========================================================================= */
.stories-row {
  padding: 34px 0;
  background: #fff;
  border-bottom: 1px solid rgba(20,20,20,.06);
}
.stories-row__track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 2px 6px;
}
.stories-row__track::-webkit-scrollbar { display: none; }

.story-circle {
  flex: 0 0 auto;
  width: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  scroll-snap-align: start;
}
.story-circle__ring {
  position: relative;
  display: block;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #FEC828, #8a5a1f);
  padding: 3px;
  transition: transform .3s ease;
}
.story-circle:hover .story-circle__ring,
.story-circle:focus-visible .story-circle__ring {
  transform: scale(1.05);
}
.story-circle__ring img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #fff;
}
.story-circle__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
  pointer-events: none;
}
.story-circle__t {
  font-size: 12px;
  font-weight: 500;
  color: #2a2a2a;
  max-width: 84px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Video player modal */
.story-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.story-modal.is-open { display: flex; }
.story-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10,10,10,.9);
}
.story-modal__box {
  position: relative;
  width: min(92vw, 400px);
  aspect-ratio: 9 / 16;
  background: #000;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.story-modal__frame, .story-modal__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.story-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: rgba(0,0,0,.45);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
}

/* Instagram/TikTok-style top progress bar - one thin segment per story on
   the page, filled for stories already watched, actively filling (via the
   CSS animation) for the one currently playing. */
.story-modal__progress {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 54px; /* leaves room for the close button */
  z-index: 2;
  display: flex;
  gap: 4px;
}
.story-modal__seg {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,.35);
  overflow: hidden;
}
.story-modal__seg-fill {
  display: block;
  height: 100%;
  width: 0;
  background: #fff;
  border-radius: 2px;
}
.story-modal__seg.is-done .story-modal__seg-fill { width: 100%; }
.story-modal__seg.is-active .story-modal__seg-fill {
  width: 100%;
  animation: story-seg-fill 15s linear;
}
@keyframes story-seg-fill {
  from { width: 0; }
  to { width: 100%; }
}

/* Prev/next - flank the video box like a standard lightbox, not overlaid
   on top of it, so they never block the video or the platform's own
   controls. */
.story-modal__nav {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  margin: 0 18px;
  transition: background .25s ease;
}
.story-modal__nav:hover { background: rgba(255,255,255,.22); }

@media (max-width: 767px) {
  .stories-row { padding: 26px 0; }
  .stories-row__track { gap: 16px; }
  .story-circle { width: 72px; }
  .story-circle__ring { width: 64px; height: 64px; }
  .story-circle__t { max-width: 72px; }
  .story-modal__nav { width: 38px; height: 38px; margin: 0 8px; font-size: 17px; }
}