/* ============================================================
   WaterHeater.ae Premium Motion & Presentation Layer
   Additive styles only: preserves existing content and structure.
   ============================================================ */

:root {
  --motion-ease: cubic-bezier(.2,.8,.2,1);
  --motion-spring: cubic-bezier(.16,1,.3,1);
  --premium-blue: #061b54;
  --premium-ink: #071326;
  --premium-line: rgba(1,33,105,.14);
  --premium-glow: rgba(200,16,46,.18);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(1,33,105,.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(1,33,105,.03) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 72%, transparent);
}

/* Shared premium interactions */
.btn-cta,
.btn-primary,
.btn-slide-contact,
.btn-slide-services,
.cta-banner-btn,
.svc-cta-btn,
.who-btn,
.comfort-btn,
.svc-detail-btn,
.svc-card-btn,
.cpf-submit,
.git-whatsapp-btn,
.guides-banner-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  touch-action: manipulation;
}

.btn-cta::before,
.btn-primary::before,
.btn-slide-contact::before,
.btn-slide-services::before,
.cta-banner-btn::before,
.svc-cta-btn::before,
.who-btn::before,
.comfort-btn::before,
.svc-detail-btn::before,
.svc-card-btn::before,
.cpf-submit::before,
.git-whatsapp-btn::before,
.guides-banner-btn::before {
  content: "";
  position: absolute;
  inset: -30% auto -30% -45%;
  width: 34%;
  transform: skewX(-20deg) translateX(-120%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  transition: transform .75s var(--motion-spring);
  z-index: -1;
}

.btn-cta:hover::before,
.btn-primary:hover::before,
.btn-slide-contact:hover::before,
.btn-slide-services:hover::before,
.cta-banner-btn:hover::before,
.svc-cta-btn:hover::before,
.who-btn:hover::before,
.comfort-btn:hover::before,
.svc-detail-btn:hover::before,
.svc-card-btn:hover::before,
.cpf-submit:hover::before,
.git-whatsapp-btn:hover::before,
.guides-banner-btn:hover::before {
  transform: skewX(-20deg) translateX(460%);
}

.feature-item,
.service-card,
.trusted-card,
.blog-post-card,
.blog-list-card,
.svc-card,
.git-info-item,
.contact-page-form-wrap,
.catalog-viewer,
.catalog-intro,
.who-content,
.who-images,
.svc-detail-img,
.svc-detail-content,
.svc-install-content,
.svc-install-video {
  transform-style: preserve-3d;
}

.feature-item,
.service-card,
.trusted-card,
.blog-post-card,
.blog-list-card,
.svc-card,
.git-info-item {
  position: relative;
  isolation: isolate;
}

.feature-item::after,
.service-card::after,
.trusted-card::after,
.blog-post-card::after,
.blog-list-card::after,
.svc-card::after,
.git-info-item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.38), transparent 32%, rgba(200,16,46,.22));
  opacity: 0;
  transition: opacity .35s ease;
  z-index: -1;
}

.feature-item:hover::after,
.service-card:hover::after,
.trusted-card:hover::after,
.blog-post-card:hover::after,
.blog-list-card:hover::after,
.svc-card:hover::after,
.git-info-item:hover::after {
  opacity: 1;
}

.premium-reveal {
  opacity: 0;
  transform: translate3d(0, 34px, 0) scale(.985);
  filter: blur(8px);
  transition:
    opacity .75s var(--motion-spring),
    transform .75s var(--motion-spring),
    filter .75s var(--motion-spring),
    clip-path .85s var(--motion-spring);
  transition-delay: calc(var(--stagger, 0) * 55ms);
}

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

.premium-heading {
  display: block;
  clip-path: inset(0 0 105% 0 round 8px);
  transform: translateY(18px);
  transition:
    clip-path .9s var(--motion-spring),
    transform .9s var(--motion-spring);
}

.premium-heading.is-visible {
  clip-path: inset(-6% -2% -8% -2% round 8px);
  transform: translateY(0);
}

.premium-image-mask,
.service-img,
.svc-card-img-wrap,
.blog-list-img-wrap,
.who-img-grid,
.svc-detail-img,
.svc-install-video {
  overflow: hidden;
  clip-path: inset(0 0 0 0 round 18px);
}

.premium-image-mask img,
.service-img > img,
.svc-card-img-wrap img,
.blog-list-img-wrap img,
.who-img-grid img,
.svc-detail-img img,
.svc-install-video video {
  transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.04);
  transition: transform .7s var(--motion-spring), filter .7s var(--motion-spring);
  will-change: transform;
}

.service-card:hover .service-img > img,
.svc-card:hover .svc-card-img-wrap img,
.blog-list-card:hover .blog-list-img-wrap img {
  transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.09);
  filter: saturate(1.08) contrast(1.04);
}

/* Hero upgrade */
.hero-section {
  background: #050b1f;
}

.hero-ambient-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .22;
  mix-blend-mode: screen;
}

.hero-ambient-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.85) contrast(1.15);
}

.heroSwiper {
  position: relative;
  z-index: 1;
}

.hero-slide::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 26px;
  pointer-events: none;
  z-index: 2;
}

.slide-overlay {
  background:
    radial-gradient(circle at 72% 36%, rgba(200,16,46,.22), transparent 28%),
    linear-gradient(90deg, rgba(2,10,35,.88) 0%, rgba(1,33,105,.66) 46%, rgba(0,0,0,.22) 100%);
}

.slide-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 90px 100%;
  opacity: .24;
}

.slide-content {
  inset: 0 auto 0 50%;
  width: min(90%, 1180px);
  align-items: flex-start;
  text-align: left;
  max-width: 1180px;
  margin: 0 auto;
  transform: translateX(-50%);
  padding: 0;
}

.slide-content h1 {
  max-width: 760px;
  letter-spacing: -.03em;
  text-wrap: balance;
  text-shadow: 0 18px 50px rgba(0,0,0,.34);
}

.slide-desc {
  max-width: 620px;
  font-size: clamp(1rem, 1.6vw, 1.18rem);
}

.slide-buttons {
  position: relative;
}

.slide-buttons::before {
  content: "";
  position: absolute;
  left: 0;
  top: -18px;
  width: 84px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent), rgba(255,255,255,.1));
}

.heroSwiper .swiper-pagination {
  left: auto !important;
  right: 6vw;
  bottom: 44px !important;
  width: auto !important;
  display: flex;
  gap: 10px;
}

.heroSwiper .swiper-pagination-bullet {
  width: 44px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
}

.heroSwiper .swiper-pagination-bullet-active {
  background: var(--color-accent);
}

/* 3D product storytelling */
.product-story-section {
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 8vw, 120px) 0;
  background:
    radial-gradient(circle at 80% 18%, rgba(200,16,46,.14), transparent 28%),
    linear-gradient(135deg, #f7f9ff 0%, #ffffff 48%, #eef3ff 100%);
}

.product-story-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(1,33,105,.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(1,33,105,.06) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(circle at 68% 42%, #000, transparent 62%);
  pointer-events: none;
}

.product-story-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
  gap: clamp(34px, 6vw, 78px);
  align-items: center;
}

.product-story-copy {
  position: relative;
  z-index: 2;
}

.product-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid rgba(1,33,105,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.7);
  color: var(--color-accent);
  font-weight: 800;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.product-kicker::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 8px rgba(200,16,46,.11);
}

.product-story-copy h2 {
  margin-top: 20px;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.05;
  color: var(--color-primary);
  letter-spacing: -.035em;
  text-wrap: balance;
}

.product-story-copy p {
  margin-top: 20px;
  max-width: 580px;
  font-size: 1.02rem;
  color: #334155;
}

.product-spec-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 30px;
}

.product-spec {
  padding: 16px;
  border: 1px solid rgba(1,33,105,.12);
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 16px 36px rgba(1,33,105,.08);
}

.product-spec strong {
  display: block;
  color: var(--color-primary);
  font-size: 1.15rem;
  line-height: 1.15;
}

.product-spec span {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: .82rem;
  line-height: 1.35;
}

.product-stage-wrap {
  position: relative;
  min-height: 520px;
  border-radius: 34px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.98), rgba(226,234,249,.76) 48%, rgba(1,33,105,.09) 100%);
  border: 1px solid rgba(1,33,105,.12);
  box-shadow: 0 34px 90px rgba(1,33,105,.16);
  overflow: hidden;
}

.product-stage-wrap::before {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px dashed rgba(1,33,105,.18);
  border-radius: 26px;
}

.heater-3d-stage {
  position: absolute;
  inset: 38px 84px;
  z-index: 2;
}

.heater-3d-stage model-viewer {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 430px;
  --poster-color: transparent;
  background: transparent;
}

.model-fallback {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 30px;
  filter: drop-shadow(0 30px 40px rgba(1,33,105,.22));
}

.tech-label {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 4px;
  width: 168px;
  padding: 12px 14px;
  border: 1px solid rgba(1,33,105,.15);
  border-radius: 16px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 44px rgba(1,33,105,.12);
  color: var(--premium-ink);
}

.tech-label strong {
  color: var(--color-primary);
  font-size: .9rem;
  line-height: 1.15;
}

.tech-label span {
  font-size: .75rem;
  line-height: 1.35;
  color: #64748b;
}

.tech-label--hot { top: 76px; right: 22px; }
.tech-label--cold { bottom: 82px; left: 22px; }
.tech-label--safe { bottom: 34px; right: 38px; }

.connector-svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.connector-svg path {
  fill: none;
  stroke: rgba(1,33,105,.36);
  stroke-width: 1.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.3s var(--motion-spring);
}

.product-stage-wrap.is-visible .connector-svg path,
.connector-svg.is-visible path {
  stroke-dashoffset: 0;
}

.flow-pill {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  padding: 9px 14px;
  border-radius: 999px;
  color: var(--color-white);
  background: linear-gradient(90deg, #0b57d0, var(--color-accent));
  box-shadow: 0 16px 36px rgba(1,33,105,.18);
  font-size: .82rem;
  font-weight: 800;
}

.flow-pill i {
  animation: premiumPulse 1.8s ease-in-out infinite;
}

/* Section presentation upgrades */
.features-inner,
.uk-manual-wrap,
.services-grid,
.trusted-cards,
.blog-posts-grid,
.blog-list-container,
.svc-cards-grid,
.git-info-row {
  perspective: 1200px;
}

.features-inner {
  box-shadow: 0 26px 70px rgba(1,33,105,.18);
  background: linear-gradient(135deg, #061b54, #012169 56%, #173a8f);
}

.feature-item:not(:last-child) {
  border-right: 1px solid rgba(255,255,255,.14);
}

.feature-icon img,
.service-icon-circle img,
.trusted-card img {
  transition: transform .45s var(--motion-spring);
}

.feature-item:hover .feature-icon img,
.service-card:hover .service-icon-circle img,
.trusted-card:hover img {
  transform: translateY(-4px) rotate(-3deg) scale(1.05);
}

.uk-manual-section {
  position: relative;
  background:
    linear-gradient(135deg, rgba(1,33,105,.04), rgba(255,255,255,.94)),
    radial-gradient(circle at 18% 22%, rgba(200,16,46,.1), transparent 24%);
}

.uk-manual-wrap {
  position: relative;
  border: 1px solid rgba(1,33,105,.12);
  box-shadow: 0 24px 70px rgba(1,33,105,.1);
}

.uk-manual-wrap::after {
  content: "BS / UAE TECHNICAL STANDARD";
  position: absolute;
  right: 22px;
  bottom: 18px;
  color: rgba(1,33,105,.22);
  font-weight: 900;
  letter-spacing: .18em;
  font-size: .68rem;
}

.services-section,
.svc-cards-section,
.blog-posts-section,
.blog-list-section,
.contact-page-section {
  position: relative;
}

.service-card,
.svc-card,
.blog-list-card,
.blog-post-card {
  will-change: transform;
}

.service-card:hover,
.svc-card:hover,
.blog-list-card:hover,
.blog-post-card:hover,
.trusted-card:hover,
.git-info-item:hover {
  transform: translateY(-8px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
}

.blog-post-card {
  border: 1px solid rgba(1,33,105,.1);
  box-shadow: 0 14px 42px rgba(1,33,105,.07);
}

.blog-post-card::before {
  content: "Guide";
  display: inline-flex;
  margin-bottom: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(200,16,46,.09);
  color: var(--color-accent);
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.blogs-hero,
.about-hero,
.services-hero,
.contact-hero {
  position: relative;
  overflow: hidden;
}

.blogs-hero::after,
.about-hero::after,
.services-hero::after,
.contact-hero::after,
.comfort-banner::after,
.svc-cta::after,
.cta-banner::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 24px;
  pointer-events: none;
}

.cta-banner,
.svc-cta,
.comfort-banner,
.site-footer {
  position: relative;
  overflow: hidden;
}

.cta-ambient-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .32;
  pointer-events: none;
}

.cta-ambient-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.82) contrast(1.12);
}

.cta-banner-content,
.svc-cta-content,
.comfort-content {
  position: relative;
  z-index: 2;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 20%, rgba(200,16,46,.22), transparent 24%),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: auto, 72px 100%;
  opacity: .5;
  pointer-events: none;
}

.footer-main,
.footer-bottom {
  position: relative;
  z-index: 1;
}

@keyframes premiumPulse {
  0%, 100% { transform: translateX(0); opacity: .7; }
  50% { transform: translateX(4px); opacity: 1; }
}

@media (max-width: 992px) {
  .slide-content {
    align-items: center;
    text-align: center;
  }

  .slide-buttons::before {
    left: 50%;
    transform: translateX(-50%);
  }

  .product-story-inner {
    grid-template-columns: 1fr;
  }

  .product-stage-wrap {
    min-height: 460px;
  }

  .heater-3d-stage {
    inset: 50px 44px 62px;
  }
}

@media (max-width: 768px) {
  .premium-reveal,
  .premium-heading {
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: none;
  }

  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero-ambient-video,
  .cta-ambient-video {
    display: none;
  }

  .hero-slide::before,
  .blogs-hero::after,
  .about-hero::after,
  .services-hero::after,
  .contact-hero::after,
  .comfort-banner::after,
  .svc-cta::after,
  .cta-banner::after {
    inset: 10px;
    border-radius: 18px;
  }

  .product-spec-grid {
    grid-template-columns: 1fr;
  }

  .product-stage-wrap {
    min-height: 410px;
    border-radius: 24px;
  }

  .heater-3d-stage {
    inset: 52px 22px 92px;
  }

  .tech-label {
    width: auto;
    max-width: 145px;
    padding: 10px 11px;
  }

  .tech-label--hot { top: 18px; right: 16px; }
  .tech-label--cold { left: 16px; bottom: 56px; }
  .tech-label--safe { right: 16px; bottom: 16px; }
  .connector-svg { opacity: .45; }

  .feature-item:not(:last-child) {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.14);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }

  .premium-reveal,
  .premium-heading {
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: none;
  }

  .premium-image-mask img,
  .service-img > img,
  .svc-card-img-wrap img,
  .blog-list-img-wrap img,
  .who-img-grid img,
  .svc-detail-img img,
  .svc-install-video video {
    transform: none;
  }
}

/* ============================================================
   Refinement Pass: British Engineering / UAE Premium Service
   ============================================================ */

.hero-section::after {
  content: "WALES / UAE SERVICE";
  position: absolute;
  z-index: 3;
  right: clamp(18px, 5vw, 76px);
  top: clamp(90px, 14vh, 150px);
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: rgba(255,255,255,.78);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .18em;
  backdrop-filter: blur(12px);
  background: rgba(5,11,31,.22);
}

.hero-slide {
  background-position: center;
  transform: scale(1.02);
  transition: transform 1.2s var(--motion-spring), clip-path 1s var(--motion-spring);
  clip-path: inset(0 0 0 0 round 0);
}

.swiper-slide-active.hero-slide {
  transform: scale(1);
  clip-path: inset(0 0 0 0 round 0);
}

.slide-content h1::after {
  content: "";
  display: block;
  width: 110px;
  height: 3px;
  margin-top: 22px;
  background: linear-gradient(90deg, var(--color-accent), rgba(255,255,255,.16));
  border-radius: 999px;
}

.scroll-down {
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.35));
}

/* Product system: remove disconnected white panel feel */
.product-story-section {
  padding: clamp(64px, 7vw, 104px) 0;
  color: #fff;
  background:
    radial-gradient(circle at 74% 24%, rgba(200,16,46,.24), transparent 28%),
    radial-gradient(circle at 16% 82%, rgba(32,89,190,.22), transparent 28%),
    linear-gradient(135deg, #040a1d 0%, #061b54 44%, #01113a 100%);
}

.product-story-section::before {
  background:
    linear-gradient(90deg, rgba(255,255,255,.075) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.product-story-section::after {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 34px;
  pointer-events: none;
}

.product-story-inner {
  grid-template-columns: minmax(320px, .84fr) minmax(430px, 1.16fr);
  gap: clamp(28px, 5vw, 58px);
}

.product-kicker {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

.product-story-copy h2 {
  color: #fff;
  max-width: 620px;
}

.product-story-copy p {
  color: rgba(235,241,255,.78);
}

.product-spec-grid {
  grid-template-columns: 1fr;
  max-width: 540px;
  gap: 10px;
}

.product-spec {
  position: relative;
  display: grid;
  grid-template-columns: 112px 1fr;
  align-items: center;
  padding: 15px 18px;
  border-color: rgba(255,255,255,.14);
  background: linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,.045));
  box-shadow: 0 18px 44px rgba(0,0,0,.18);
  overflow: hidden;
}

.product-spec::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  background: linear-gradient(180deg, var(--color-accent), #fff);
  border-radius: 999px;
}

.product-spec strong { color: #fff; }
.product-spec span { color: rgba(235,241,255,.68); }

.product-stage-wrap {
  min-height: 500px;
  border-radius: 36px;
  background:
    radial-gradient(circle at 50% 48%, rgba(255,255,255,.16), transparent 33%),
    radial-gradient(circle at 50% 60%, rgba(200,16,46,.18), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.035));
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 44px 110px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.06);
}

.product-stage-wrap::before {
  inset: 20px;
  border-color: rgba(255,255,255,.16);
}

.product-stage-wrap::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 330px;
  height: 330px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 0 0 38px rgba(255,255,255,.025), 0 0 90px rgba(200,16,46,.18);
  pointer-events: none;
}

.heater-3d-stage {
  inset: 44px 104px 74px;
  z-index: 3;
}

.heater-3d-stage model-viewer {
  min-height: 370px;
  height: 100%;
  filter: drop-shadow(0 32px 54px rgba(0,0,0,.42));
  cursor: grab;
}

.heater-3d-stage model-viewer:active { cursor: grabbing; }

.model-fallback { display: none !important; }

.tech-label {
  width: 184px;
  border-color: rgba(255,255,255,.16);
  background: rgba(3,13,42,.74);
  color: #fff;
  box-shadow: 0 22px 48px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.05);
}

.tech-label strong { color: #fff; }
.tech-label span { color: rgba(235,241,255,.66); }
.tech-label--hot { top: 54px; right: 34px; }
.tech-label--cold { bottom: 118px; left: 30px; }
.tech-label--safe { bottom: 42px; right: 48px; }

.connector-svg { z-index: 2; }
.connector-svg path {
  stroke: rgba(255,255,255,.46);
  stroke-width: 1.35;
  filter: drop-shadow(0 0 10px rgba(200,16,46,.22));
}

.flow-pill {
  bottom: 22px;
  background: linear-gradient(90deg, #164fc4, var(--color-accent));
  box-shadow: 0 18px 46px rgba(0,0,0,.32);
}

.product-story-cta {
  position: absolute;
  z-index: 5;
  right: 32px;
  top: 24px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  color: #fff;
  background: rgba(255,255,255,.08);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(14px);
}

.product-story-cta:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

/* Feature / trust cards */
.features-bar {
  margin-top: 0;
  padding: 34px 0 22px;
  background: linear-gradient(180deg, #050b1f, #fff 76%);
}

.features-inner {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
}

.feature-item {
  padding: 28px 30px;
  background: linear-gradient(135deg, rgba(255,255,255,.08), transparent);
}

.feature-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  padding: 15px;
  border-radius: 22px;
  background: rgba(255,255,255,.1);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

.feature-body h3 {
  font-size: clamp(1.2rem, 2.1vw, 1.75rem);
  text-align: left;
}

.feature-body p { text-align: left; opacity: .82; }

/* Premium services cards on home */
.services-section {
  background:
    radial-gradient(circle at 8% 12%, rgba(1,33,105,.08), transparent 24%),
    linear-gradient(180deg, #f6f8fc 0%, #fff 100%);
}

.svc-label,
.catalog-badge,
.git-label {
  letter-spacing: .14em;
  text-transform: uppercase;
}

.services-grid {
  gap: 22px;
}

.service-card {
  display: flex;
  flex-direction: column;
  min-height: 390px;
  padding: 12px;
  border: 1px solid rgba(1,33,105,.1);
  border-radius: 24px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 18px 48px rgba(1,33,105,.08);
  overflow: visible;
}

.service-card::before {
  content: "Service";
  position: absolute;
  z-index: 4;
  left: 24px;
  top: 24px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #fff;
  background: rgba(1,33,105,.82);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}

.service-img {
  height: 238px;
  margin-bottom: 34px;
  border-radius: 18px;
  overflow: visible;
  clip-path: none !important;
}

.service-img::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.34);
  pointer-events: none;
  z-index: 1;
}

.service-img > img {
  height: 100%;
  border-radius: 18px;
  clip-path: inset(0 0 0 0 round 18px);
}

.service-icon-circle {
  left: auto;
  right: 22px;
  bottom: -36px;
  transform: none;
  width: 86px;
  height: 86px;
  border: 6px solid #fff;
  box-shadow: 0 18px 34px rgba(1,33,105,.25);
  z-index: 5;
}

.service-icon-circle img {
  width: 52px;
  height: 52px;
}

.service-title,
#first-title {
  width: auto;
  min-height: 112px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  padding: 0 10px 10px;
  text-align: left;
  color: var(--premium-ink);
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  gap: 16px;
}

.service-title::after {
  content: "\f061";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-left: auto;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--color-primary);
  box-shadow: 0 10px 22px rgba(1,33,105,.16), inset 0 0 0 1px rgba(255,255,255,.12);
  transition: transform .35s var(--motion-spring), background .35s ease, color .35s ease;
}

.service-card:hover .service-title::after {
  transform: translateX(4px);
  color: #fff;
  background: var(--color-accent);
}

/* Services page conversion cards + process */
.svc-cards-section {
  background:
    linear-gradient(180deg, #fff 0%, #f4f7fc 100%);
}

.svc-cards-grid {
  gap: 28px;
}

.svc-card {
  min-height: 590px;
  padding: 0;
  border-radius: 28px;
  border: 1px solid rgba(1,33,105,.1);
  background: #fff;
  box-shadow: 0 22px 60px rgba(1,33,105,.09);
  overflow: hidden;
}

.svc-card::before {
  content: "Technical Service";
  position: absolute;
  z-index: 4;
  left: 22px;
  top: 22px;
  padding: 7px 11px;
  border-radius: 999px;
  color: #fff;
  background: rgba(1,33,105,.82);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
  backdrop-filter: blur(14px);
}

.svc-card-img-wrap {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  width: 100%;
  height: 278px;
  border-radius: 0 0 28px 28px;
}

.svc-card-body {
  padding: 30px 32px 34px;
  align-items: flex-start;
  text-align: left;
  background:
    radial-gradient(circle at 100% 0%, rgba(200,16,46,.18), transparent 28%),
    linear-gradient(145deg, #061b54, #012169 70%);
  border-radius: 0;
}

.svc-card-title { font-size: 1.35rem; }
.svc-card-desc { color: rgba(255,255,255,.82); }
.svc-card-btn {
  border-radius: 999px;
  padding-inline: 22px;
}

.service-process-section {
  position: relative;
  overflow: hidden;
  padding: 78px 0;
  background: linear-gradient(135deg, #061b54, #01113a);
  color: #fff;
}

.service-process-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .7;
}

.service-process-head,
.service-process-track { position: relative; z-index: 1; }

.service-process-section .premium-reveal {
  opacity: 1;
  transform: none;
  filter: none;
}

.blog-list-section .premium-reveal,
.blog-posts-section .premium-reveal {
  opacity: 1;
  transform: none;
  filter: none;
}

.service-process-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 34px;
}

.service-process-head span {
  color: var(--color-accent);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.service-process-head h2 {
  max-width: 780px;
  margin: 0;
  color: #fff;
  font-size: clamp(1.35rem, 2.5vw, 2.4rem);
  line-height: 1.2;
}

.service-process-track {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  padding: 44px 0 12px;
}

.service-process-line {
  position: absolute;
  inset: 4px 0 auto 0;
  width: 100%;
  height: 90px;
  pointer-events: none;
}

.service-process-line path {
  fill: none;
  stroke: rgba(255,255,255,.38);
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.4s var(--motion-spring);
}

.service-process-line.is-visible path { stroke-dashoffset: 0; }

.service-step {
  min-height: 106px;
  padding: 18px 14px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 22px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
}

.service-step strong {
  display: block;
  color: var(--color-accent);
  font-size: .78rem;
  letter-spacing: .12em;
}

.service-step span {
  display: block;
  margin-top: 16px;
  color: #fff;
  font-weight: 800;
  line-height: 1.2;
}

/* UK manual trust block */
.uk-manual-section {
  padding: 70px 0;
  background:
    radial-gradient(circle at 84% 22%, rgba(200,16,46,.1), transparent 25%),
    linear-gradient(180deg, #f7f9fd, #fff);
}

.uk-manual-wrap {
  width: min(90%, 1160px);
  margin: 0 auto;
  padding: clamp(30px, 5vw, 58px);
  gap: 24px;
  border-radius: 30px;
  background:
    linear-gradient(90deg, rgba(1,33,105,.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(1,33,105,.04) 1px, transparent 1px),
    #fff;
  background-size: 42px 42px, 42px 42px, auto;
}

.uk-manual-heading h2 {
  font-size: clamp(1.2rem, 2vw, 1.9rem);
  font-weight: 900;
  color: var(--color-primary);
  letter-spacing: .02em;
  text-transform: uppercase;
}

.uk-manual-statement {
  max-width: 1000px;
  font-size: clamp(2rem, 5vw, 4.25rem);
}

.uk-manual-flag {
  transform: rotate(-1deg);
  box-shadow: 0 12px 28px rgba(1,33,105,.18);
}

/* Trusted and editorial hub */
.trusted-section {
  background: linear-gradient(180deg, #fff, #f6f8fc);
}

.trusted-inner {
  grid-template-columns: minmax(0, .9fr) minmax(280px, .55fr);
  gap: 48px;
}

.trusted-inner::after {
  content: "BS / UAE INSTALLATION READY";
  display: grid;
  place-items: center;
  min-height: 360px;
  border: 1px solid rgba(1,33,105,.12);
  border-radius: 30px;
  color: rgba(1,33,105,.5);
  font-size: clamp(1.2rem, 2vw, 2rem);
  font-weight: 900;
  letter-spacing: .16em;
  text-align: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(200,16,46,.12), transparent 35%),
    linear-gradient(90deg, rgba(1,33,105,.06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(1,33,105,.04) 1px, transparent 1px),
    #fff;
  background-size: auto, 44px 44px, 44px 44px, auto;
  box-shadow: 0 22px 60px rgba(1,33,105,.08);
}

.trusted-card {
  border-radius: 22px;
  background: linear-gradient(145deg, #061b54, #012169) !important;
  box-shadow: 0 18px 44px rgba(1,33,105,.16);
}

.guides-banner {
  padding: 70px 0 0;
  background: #fff;
}

.guides-banner-inner {
  border-radius: 28px;
  border-color: rgba(1,33,105,.12);
  background:
    radial-gradient(circle at 92% 24%, rgba(200,16,46,.12), transparent 26%),
    linear-gradient(135deg, #fff, #f5f8ff);
  box-shadow: 0 22px 60px rgba(1,33,105,.09);
}

.blog-posts-section {
  padding: 46px 0 90px;
  background: #fff;
}

.blog-posts-grid {
  display: grid;
  grid-template-columns: 1.18fr .82fr .82fr;
  gap: 18px;
}

.blog-post-card {
  min-height: 230px;
  display: flex;
  flex-direction: column;
  padding: 26px;
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.9)),
    linear-gradient(135deg, #fff, #f7f9ff);
  overflow: hidden;
}

.blog-post-card:first-child {
  grid-row: span 2;
  min-height: 478px;
  padding: 34px;
  color: #fff;
  background:
    radial-gradient(circle at 88% 12%, rgba(200,16,46,.28), transparent 28%),
    linear-gradient(145deg, #061b54, #01113a);
}

.blog-post-card::before {
  position: relative;
  z-index: 2;
}

.blog-post-card:not(:first-child)::before {
  width: max-content;
}

.blog-post-card:not(:first-child)::after {
  content: "";
  position: absolute;
  right: -50px;
  bottom: -48px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(1,33,105,.11), transparent 68%);
  opacity: .8;
}

.blog-post-card:first-child::after {
  content: "";
  position: absolute;
  inset: auto -80px -110px auto;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 0 0 46px rgba(255,255,255,.035);
}

.blog-post-card:first-child::before {
  content: "Featured Guide";
  background: rgba(255,255,255,.12);
  color: #fff;
}

.blog-post-card:first-child .blog-post-title { color: #fff; font-size: clamp(1.6rem, 3vw, 2.4rem); }
.blog-post-card:first-child .blog-post-excerpt { color: rgba(255,255,255,.72); }

.blog-post-title {
  color: var(--color-primary);
  font-size: 1.2rem;
  line-height: 1.22;
}

.blog-post-title:hover { color: var(--color-accent); }

.blog-post-title::after {
  content: "\f061";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-left: 10px;
  border-radius: 50%;
  font-size: .8rem;
  color: currentColor;
  background: rgba(1,33,105,.07);
  transform: translateY(-2px);
  transition: transform .35s var(--motion-spring), background .35s ease;
}

.blog-post-card:first-child .blog-post-title::after {
  background: rgba(255,255,255,.12);
}

.blog-post-card:hover .blog-post-title::after {
  transform: translate(5px, -2px);
  background: rgba(200,16,46,.14);
}

.blog-post-excerpt {
  margin-top: 16px;
  color: #64748b;
}

/* Blogs page editorial grid */
.blog-list-section {
  background: linear-gradient(180deg, #f6f8fc, #fff);
}

.blog-list-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.blog-list-card {
  display: flex;
  flex-direction: column;
  min-height: 420px;
  border-radius: 28px;
  border: 1px solid rgba(1,33,105,.1);
  box-shadow: 0 22px 58px rgba(1,33,105,.08);
}

.blog-list-card:first-child {
  grid-column: span 2;
  min-height: 500px;
}

.blog-list-card::before {
  content: "Expert Guide";
  position: absolute;
  z-index: 4;
  left: 22px;
  top: 22px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #fff;
  background: rgba(1,33,105,.82);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}

.blog-list-card:first-child::before { content: "Featured"; background: var(--color-accent); }

.blog-list-img-wrap {
  width: 100%;
  height: 238px;
  border-radius: 28px 28px 0 0;
}

.blog-list-card:first-child .blog-list-img-wrap { height: 310px; }

.blog-list-img-wrap img {
  width: 100%;
  height: 100%;
  margin: 0;
}

.blog-list-content {
  padding: 26px;
  align-items: flex-start;
}

.blog-list-title a {
  color: var(--color-primary);
  font-size: clamp(1.2rem, 2vw, 1.65rem);
}

.blog-list-card:first-child .blog-list-title a {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
}

/* About final section */
.comfort-banner {
  width: min(90%, 1180px);
  min-height: 520px;
  margin-bottom: 70px;
  border-radius: 34px;
  overflow: hidden;
  filter: none;
  box-shadow: 0 34px 90px rgba(1,33,105,.18);
}

.comfort-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 72% 24%, rgba(200,16,46,.28), transparent 30%),
    linear-gradient(90deg, rgba(1,16,54,.88), rgba(1,33,105,.54));
}

.comfort-banner::after {
  z-index: 2;
  inset: 18px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 24px;
}

.comfort-kicker {
  display: inline-flex;
  margin-bottom: 22px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.comfort-content { z-index: 3; padding-top: 34px; padding-bottom: 34px; }

.comfort-heading {
  margin: 0 auto 38px;
  max-width: 920px;
  font-size: clamp(2.5rem, 7vw, 5.8rem);
  text-shadow: 0 24px 60px rgba(0,0,0,.32);
}

/* Contact and catalog polish */
.contact-page-section,
.git-section,
.catalog-hero {
  background:
    radial-gradient(circle at 8% 8%, rgba(1,33,105,.08), transparent 24%),
    linear-gradient(180deg, #f7f9fd, #fff);
}

.contact-page-form-wrap,
.git-info-item,
.catalog-intro,
.catalog-viewer {
  border: 1px solid rgba(1,33,105,.1);
  border-radius: 28px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 22px 60px rgba(1,33,105,.09);
}

.contact-page-form-wrap { padding: clamp(22px, 4vw, 42px); }

.cpf-group input,
.cpf-group textarea {
  min-height: 48px;
  border-radius: 16px;
  border-color: rgba(1,33,105,.14);
  background: #f8faff;
}

.cpf-group input:focus,
.cpf-group textarea:focus {
  box-shadow: 0 0 0 4px rgba(1,33,105,.09);
}

.git-info-row { gap: 18px; }
.git-info-item { padding: 30px 24px; }
.git-info-divider { margin: 10px 0 14px; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); }
.git-info-text { font-size: clamp(1rem, 1.6vw, 1.35rem); overflow-wrap: anywhere; }

.catalog-viewer { background: linear-gradient(145deg, #061b54, #012169 58%, #1b3f91); }
.catalog-intro { position: sticky; }

@media (max-width: 1100px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-posts-grid,
  .blog-list-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-story-inner { grid-template-columns: 1fr; }
  .trusted-inner::after { min-height: 240px; }
}

@media (max-width: 768px) {
  .hero-section::after { display: none; }
  .product-stage-wrap { min-height: 600px; padding: 340px 16px 138px; }
  .heater-3d-stage { inset: 86px 22px 166px; }
  .tech-label { position: relative; inset: auto !important; width: auto; max-width: none; }
  .product-stage-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: end; }
  .heater-3d-stage { position: absolute; }
  .connector-svg { display: none; }
  .flow-pill { left: 16px; right: 16px; bottom: 78px; transform: none; justify-content: center; }
  .product-story-cta { left: 16px; right: 16px; top: auto; bottom: 22px; justify-content: center; }
  .product-spec { grid-template-columns: 1fr; }
  .features-inner { flex-direction: column; }
  .feature-item { padding: 24px; }
  .services-grid,
  .blog-posts-grid,
  .blog-list-container,
  .service-process-track { grid-template-columns: 1fr; }
  .blog-post-card:first-child,
  .blog-list-card:first-child { grid-column: auto; grid-row: auto; min-height: auto; }
  .service-process-head { display: block; }
  .service-process-head h2 { margin-top: 12px; }
  .service-process-line { display: none; }
  .svc-card { min-height: auto; }
  .svc-card-img-wrap { height: 220px; }
  .comfort-banner { min-height: 430px; border-radius: 24px; }
  .git-info-row { flex-direction: column; }

  .about-hero,
  .services-hero,
  .contact-hero {
    min-height: 520px !important;
  }

  .blogs-hero {
    min-height: 360px !important;
  }

  .product-story-section {
    padding: 48px 0 54px;
  }

  .product-story-copy h2 {
    font-size: clamp(2rem, 10vw, 2.85rem);
    line-height: 1.05;
  }

  .product-stage-wrap {
    min-height: 520px;
    padding: 292px 14px 124px;
  }

  .heater-3d-stage {
    inset: 58px 4px 238px;
  }

  .tech-label {
    font-size: .9rem;
  }

  .flow-pill {
    bottom: 66px;
  }

  .product-story-cta {
    bottom: 14px;
  }

  .uk-manual-section {
    padding: 46px 0;
  }

  .uk-manual-wrap {
    padding: 24px 18px;
    gap: 16px;
  }

  .uk-manual-heading {
    gap: 8px;
  }

  .uk-manual-statement {
    font-size: clamp(1.75rem, 11vw, 2.8rem);
    line-height: 1.06;
  }

  .trusted-section {
    padding: 56px 0;
  }

  .trusted-inner {
    display: block;
  }

  .trusted-content {
    width: 100%;
  }

  .trusted-heading {
    font-size: 2rem;
    line-height: 1.12;
  }

  .trusted-desc {
    font-size: .96rem;
    line-height: 1.75;
  }

  .trusted-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .trusted-card {
    min-width: 0;
    flex-direction: row;
    justify-content: flex-start;
    padding: 18px;
  }

  .trusted-card img {
    width: 48px;
  }

  .trusted-card span {
    font-size: 1.05rem;
  }

  .trusted-inner::after {
    min-height: 150px;
    margin-top: 18px;
    font-size: .82rem;
    letter-spacing: .1em;
    padding: 18px;
  }

  .services-section {
    padding: 58px 0;
  }

  .svc-header {
    margin-bottom: 30px;
  }

  .svc-header h2 {
    font-size: 1.55rem;
    line-height: 1.28;
  }

  .service-card {
    min-height: auto;
    padding: 10px;
  }

  .service-img {
    height: 210px;
    margin-bottom: 36px;
  }

  .service-icon-circle {
    width: 82px;
    height: 82px;
    bottom: -42px;
    right: 16px;
    border-width: 7px;
  }

  .service-icon-circle img {
    width: 48px;
    height: 48px;
  }

  .service-title,
  #first-title {
    min-height: 94px;
    padding: 10px 6px 8px;
    font-size: 1.12rem;
    line-height: 1.32;
  }

  .service-title::after {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
    transform: none;
    font-size: .9rem;
  }

  .back-to-top {
    display: none !important;
  }

  .blog-posts-section {
    padding: 40px 0 58px;
  }

  .blog-post-card:first-child {
    min-height: auto;
  }
}

@media (max-width: 520px) {
  .product-stage-wrap { grid-template-columns: 1fr; min-height: 650px; padding-top: 330px; }
  .heater-3d-stage { inset: 66px 4px 330px; }
  .flow-pill { bottom: 72px; }
  .product-story-cta { bottom: 22px; }
  .tech-label { padding: 9px 11px; }
  .slide-content { width: min(86%, 1180px); }
  .heroSwiper .swiper-pagination { right: 7%; bottom: 26px !important; }
}

/* Concrete motion choreography layer */
.premium-heading {
  letter-spacing: .018em;
  transition: clip-path .9s var(--motion-spring), transform .9s var(--motion-spring), letter-spacing .9s var(--motion-spring);
}

.premium-heading.is-visible { letter-spacing: -.025em; }

.premium-reveal.is-visible .premium-heading,
.swiper-slide-active .premium-heading {
  clip-path: inset(-6% -2% -8% -2% round 8px);
  transform: translateY(0);
  letter-spacing: -.025em;
}

.heroSwiper .swiper-slide-prev.hero-slide,
.heroSwiper .swiper-slide-next.hero-slide {
  clip-path: inset(0 7% 0 0 round 0);
}

.slide-overlay { animation: heroOverlaySettle 1.2s var(--motion-spring) both; }

.slide-content .slide-desc,
.slide-content .slide-buttons {
  opacity: 0;
  transform: translateY(18px);
}

.swiper-slide-active .slide-desc { animation: softTextEnter .7s .22s var(--motion-spring) both; }
.swiper-slide-active .slide-buttons { animation: softTextEnter .7s .36s var(--motion-spring) both; }

.hero-slide {
  background-position: calc(50% + var(--hero-x, 0px)) calc(50% + var(--hero-y, 0px));
}

.flow-path {
  fill: none;
  stroke-width: 2.2;
  stroke-dasharray: 8 12 !important;
  stroke-dashoffset: 0 !important;
  opacity: .72;
}

.flow-path--cold { stroke: rgba(74,144,255,.86) !important; }
.flow-path--hot { stroke: rgba(255,68,88,.86) !important; }

.flow-dot {
  opacity: 0;
  filter: drop-shadow(0 0 10px currentColor);
}

.flow-dot--cold {
  color: #5aa0ff;
  fill: #78b7ff;
  offset-path: path("M110 336 C210 314 252 302 326 286");
  animation: flowTravel 2.7s ease-in-out infinite;
}

.flow-dot--hot {
  color: #ff405a;
  fill: #ff526a;
  offset-path: path("M344 220 C426 186 478 162 552 120");
  animation: flowTravel 2.4s .3s ease-in-out infinite;
}

.product-stage-wrap.is-visible .flow-dot,
.connector-svg.is-visible .flow-dot { opacity: 1; }

.feature-item::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .8s var(--motion-spring);
}

.feature-item.is-visible::before { transform: scaleX(1); }

.service-card::after,
.svc-card::after,
.blog-post-card::after,
.blog-list-card::after,
.service-step::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent),
    linear-gradient(135deg, rgba(200,16,46,.2), transparent 36%, rgba(44,111,255,.15));
  background-size: 180% 100%, auto;
}

.service-step { position: relative; overflow: hidden; }

.service-card.is-visible::after,
.svc-card.is-visible::after,
.blog-post-card.is-visible::after,
.blog-list-card.is-visible::after,
.service-step.is-visible::after {
  animation: edgeTravel 1.1s .18s var(--motion-spring) both;
}

.service-card:hover,
.svc-card:hover,
.blog-list-card:hover,
.blog-post-card:hover {
  box-shadow: 0 30px 78px rgba(1,33,105,.16);
}

.service-process-track::after {
  content: "";
  position: absolute;
  top: 48px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 18px rgba(255,255,255,.85), 0 0 28px rgba(200,16,46,.45);
  offset-path: path("M20 62 C160 8 260 112 398 60 S650 22 782 62 S920 102 980 54");
  animation: pipeNodeTravel 5.4s ease-in-out infinite;
}

.uk-manual-wrap::before {
  content: "British Engineering  •  Installation Ready  •  Care Manual  •  Safety Guidance";
  display: inline-flex;
  justify-content: center;
  max-width: 100%;
  padding: 9px 15px;
  border: 1px solid rgba(1,33,105,.12);
  border-radius: 999px;
  color: var(--color-primary);
  background: rgba(255,255,255,.72);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
  box-shadow: 0 14px 36px rgba(1,33,105,.08);
}

.blog-post-card::after,
.blog-list-card::after {
  z-index: 0;
}

.blog-post-card > *,
.blog-list-card > * {
  position: relative;
  z-index: 1;
}

.blog-list-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

.blog-list-card.is-visible::after { opacity: .8; }

.comfort-banner .cta-ambient-video {
  display: block;
  opacity: .24;
  mix-blend-mode: screen;
}

.magnetic-ready {
  transition: transform .22s var(--motion-spring), box-shadow .22s ease, background .22s ease;
}

@keyframes heroOverlaySettle {
  0% { opacity: .65; }
  100% { opacity: 1; }
}

@keyframes softTextEnter {
  0% { opacity: 0; transform: translateY(18px); clip-path: inset(0 0 100% 0); }
  100% { opacity: 1; transform: translateY(0); clip-path: inset(-8% 0 -8% 0); }
}

@keyframes flowTravel {
  0% { offset-distance: 0%; opacity: 0; }
  18% { opacity: 1; }
  82% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

@keyframes pipeNodeTravel {
  0% { offset-distance: 0%; opacity: .2; }
  12%, 86% { opacity: 1; }
  100% { offset-distance: 100%; opacity: .2; }
}

@keyframes edgeTravel {
  0% { background-position: 180% 0, 0 0; opacity: 0; }
  25% { opacity: 1; }
  100% { background-position: -80% 0, 0 0; opacity: .75; }
}

@media (max-width: 768px) {
  .service-process-track::after,
  .flow-dot { display: none; }

  .back-to-top,
  .back-to-top.visible {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}