/* ===== RESET & BASE ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  background: #010508;
}

body {
  font-family: 'Cairo', sans-serif;
  color: #fff;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

/* ===== SHELL PAGE ===== */
body.shell-page {
  background: linear-gradient(135deg, #010508, #010d18);
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* ===== SHELL BRANDING ===== */
body.shell-page .site-frame {
  left: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
}

body.shell-page .mobile-bar-bg {
  display: block !important;
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  height: 78px !important;
  background: linear-gradient(180deg, rgba(1, 5, 10, 0.97) 0%, rgba(2, 9, 16, 0.86) 100%) !important;
  border-bottom: 1px solid rgba(93, 215, 255, 0.12) !important;
  backdrop-filter: blur(14px);
  pointer-events: none;
  z-index: 100000 !important;
}

body.shell-page .mobile-logo {
  display: flex !important;
  align-items: center;
  position: fixed !important;
  top: 15px !important;
  left: -9px !important;
  width: min(250px, 42vw);
  height: 48px;
  padding: 0 !important;
  z-index: 100003 !important;
  line-height: 0;
}

body.shell-page .mobile-logo img {
  width: 100% !important;
  height: auto !important;
  max-height: 41px;
  object-fit: contain;
  filter:
    saturate(1.2)
    hue-rotate(-35deg)
    drop-shadow(0 0 10px rgba(93, 215, 255, 0.34));
}

body.shell-page .hamburger {
  z-index: 100004 !important;
}

body.shell-page .fullscreen-menu {
  z-index: 100005 !important;
}

@media (max-width: 1024px) {
  body.shell-page .site-frame {
    top: 60px !important;
    height: calc(100dvh - 60px) !important;
  }

  body.shell-page .mobile-bar-bg {
    height: calc(60px + env(safe-area-inset-top, 0px)) !important;
  }

  body.shell-page .mobile-logo {
    top: env(safe-area-inset-top, 0px) !important;
    left: -18px !important;
    width: min(190px, 52vw);
    height: 60px;
  }

  body.shell-page .mobile-logo img {
    max-height: 35px;
  }
}

/* ===== FRAME PAGE ===== */
body.frame-page {
  background: transparent;
  min-height: 100vh;
}

/* ===== SITE BACKGROUND ===== */
.site-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 90% 65% at 88% 4%,  rgba(0, 180, 230, 0.38) 0%, transparent 52%),
    radial-gradient(ellipse 55% 45% at 90% 10%, rgba(0, 220, 255, 0.18) 0%, transparent 42%),
    radial-gradient(ellipse 65% 55% at 6% 80%,  rgba(200, 20, 100, 0.30) 0%, transparent 52%),
    radial-gradient(ellipse 40% 35% at 4%  90%,  rgba(220, 0,  120, 0.14) 0%, transparent 44%),
    radial-gradient(ellipse 50% 40% at 50% 50%,  rgba(5, 35, 60, 0.45)   0%, transparent 70%),
    linear-gradient(160deg, #010508 0%, #010d18 45%, #020b12 100%);
  pointer-events: none;
}

/* ===== BUBBLE LAYER ===== */
.bubble-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.bubble {
  position: absolute;
  bottom: -80px;
  border-radius: 50%;
  /* glass-sphere look: specular highlight top-left + inner glow */
  background:
    radial-gradient(circle at 33% 28%, rgba(255,255,255,0.60) 0%, rgba(255,255,255,0.10) 30%, transparent 52%),
    radial-gradient(circle at 66% 70%, rgba(93,215,255,0.22) 0%, transparent 38%),
    radial-gradient(circle at 50% 50%, rgba(93,215,255,0.14) 0%, rgba(30,140,180,0.06) 65%, transparent 82%);
  box-shadow:
    inset -2px -2px 6px rgba(0,0,0,0.12),
    inset  1px  1px 4px rgba(255,255,255,0.18),
    0 2px 8px rgba(0,0,0,0.18);
  animation: bubbleRise linear forwards;
  will-change: transform, opacity;
}

@keyframes bubbleRise {
  0%   { transform: translateY(0)      translateX(0)                        scale(1);   opacity: 0; }
  6%   { opacity: var(--peak-opacity, 0.55); }
  80%  { opacity: var(--peak-opacity, 0.55); }
  100% { transform: translateY(-120vh) translateX(var(--drift, 30px))       scale(0.85); opacity: 0; }
}

/* ===== HERO ORB PORTHOLE FRAME ===== */

/* ===== HAMBURGER ===== */
.hamburger {
  position: fixed;
  top: 22px;
  right: 28px;
  z-index: 1000;
  width: 52px;
  height: 52px;
  background: rgba(6, 22, 36, 0.8);
  border: 1px solid rgba(93, 215, 255, 0.25);
  border-radius: 10px;
  backdrop-filter: blur(12px);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: border-color 0.3s, box-shadow 0.3s;
  padding: 0;
}

.hamburger:hover {
  border-color: rgba(93, 215, 255, 0.6);
  box-shadow: 0 0 18px rgba(93, 215, 255, 0.2);
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 2px;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s;
  transform-origin: center;
}

.hamburger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.is-open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.hamburger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ===== FULLSCREEN MENU ===== */
.fullscreen-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(480px, 90vw);
  z-index: 900;
  background: linear-gradient(145deg, rgba(4, 12, 22, 0.98), rgba(2, 8, 16, 1));
  border-left: 1px solid rgba(93, 215, 255, 0.15);
  backdrop-filter: blur(24px);
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 56px;
  box-shadow: -20px 0 80px rgba(0, 0, 0, 0.5);
}

.fullscreen-menu.is-open {
  transform: translateX(0);
}

.menu-close {
  position: absolute;
  top: 22px;
  right: 24px;
  background: none;
  border: none;
  color: #fff;
  font-size: 32px;
  cursor: pointer;
  line-height: 1;
  transition: none;
  font-family: 'Cairo', sans-serif;
}

.menu-close:hover,
.menu-close:active {
  color: #fff;
  background: transparent;
  box-shadow: none;
}

.menu-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.menu-logo {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 4px;
  color: rgba(255, 255, 255, 0.25);
  margin-bottom: 36px;
  text-transform: uppercase;
}

.menu-logo span {
  color: rgba(93, 215, 255, 0.7);
}

.fullscreen-menu .menu-inner a {
  font-size: 36px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 1px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  transition: color 0.25s, letter-spacing 0.25s, padding-left 0.25s;
  display: block;
}

.fullscreen-menu .menu-inner a:hover {
  color: rgba(93, 215, 255, 1);
  letter-spacing: 3px;
  padding-left: 12px;
}

/* ===== WORKS SUBMENU ===== */
.menu-has-sub {
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.menu-parent-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 36px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  letter-spacing: 1px;
  padding: 8px 0;
  cursor: pointer;
  transition: color 0.25s, letter-spacing 0.25s, padding-left 0.25s;
  user-select: none;
}

.menu-parent-label:hover {
  color: rgba(93,215,255,1);
  letter-spacing: 3px;
  padding-left: 12px;
}

.menu-chevron {
  font-size: 28px;
  display: inline-block;
  transition: transform 0.3s ease;
  color: rgba(93,215,255,0.6);
  line-height: 1;
}

.menu-has-sub.is-sub-open .menu-chevron {
  transform: rotate(90deg);
}

.menu-sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
  overflow: hidden;
}

.menu-has-sub.is-sub-open .menu-sub {
  grid-template-rows: 1fr;
}

.menu-sub > * {
  overflow: hidden;
}

.menu-sub a {
  font-size: 28px !important;
  font-weight: 600 !important;
  color: rgba(93,215,255,0.8) !important;
  letter-spacing: 2px !important;
  padding: 6px 0 6px 20px !important;
  border-bottom: none !important;
  display: block;
  transition: color 0.2s, padding-left 0.2s !important;
}

.menu-sub a:hover {
  color: #5dd7ff !important;
  letter-spacing: 3px !important;
  padding-left: 32px !important;
}

/* ===== SITE FRAME (iframe) ===== */
.site-frame {
  position: fixed;
  top: 0;
  left: 64px;
  right: 0;
  bottom: 0;
  width: calc(100vw - 64px);
  height: 100vh;
  border: none;
  z-index: 1;
}

/* ===== RADIO PLAYER (shell) ===== */
/* ===== TOP-RIGHT BAR WRAPPER ===== */
.top-bar-right {
  position: fixed;
  top: 22px;
  right: 90px;
  z-index: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ===== SOCIAL BAR ===== */
.social-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  background: transparent;
  border: none;
  padding: 0;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(6, 20, 34, 0.82);
  border: 1px solid rgba(93, 215, 255, 0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: rgba(93, 215, 255, 0.65);
  text-decoration: none;
  transition: color 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s;
  position: relative;
}

.social-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.social-link:hover {
  color: rgba(93, 215, 255, 0.95);
  background: rgba(0, 118, 135, 0.6);
  border-color: rgba(93, 215, 255, 0.55);
  box-shadow: 0 0 10px rgba(93, 215, 255, 0.2);
}

.social-link.has-url {
  color: rgba(93, 215, 255, 0.85);
}

/* Admin edit mode — pencil badge + edit cursor */
.social-bar.admin-edit-mode .social-link {
  cursor: cell;
}

.social-bar.admin-edit-mode .social-link::after {
  content: '✎';
  position: absolute;
  top: 1px;
  right: 1px;
  font-size: 7px;
  color: rgba(93, 215, 255, 0.65);
  line-height: 1;
  pointer-events: none;
}

.radio-player {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  background: rgba(6, 20, 34, 0.82);
  border: 1px solid rgba(93, 215, 255, 0.22);
  border-radius: 10px;
  padding: 0 20px;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(93, 215, 255, 0.05);
  transition: border-color 0.3s, box-shadow 0.3s;
}

.radio-player:hover {
  border-color: rgba(93, 215, 255, 0.5);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5), 0 0 14px rgba(93, 215, 255, 0.1);
}

.player-icon.headphones-img {
  width: 32px;
  height: 32px;
  opacity: 0.85;
  flex-shrink: 0;
}

.radio-play.image-play {
  background: linear-gradient(135deg, rgba(0, 118, 135, 0.92), rgba(0, 150, 165, 0.82));
  border: 1px solid rgba(0, 195, 215, 0.55);
  cursor: pointer;
  padding: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 0 10px rgba(0, 195, 215, 0.30);
}

.radio-play.image-play:hover {
  transform: scale(1.12);
  box-shadow: 0 0 18px rgba(0, 195, 215, 0.55);
}

/* Icon switching */
.radio-play.image-play .icon-play  { display: block; }
.radio-play.image-play .icon-stop  { display: none;  }
.radio-play.image-play.playing .icon-play  { display: none;  }
.radio-play.image-play.playing .icon-stop  { display: block; }

.radio-cover.custom-cover {
  display: flex;
  align-items: center;
  gap: 10px;
}

.slider-wrap {
  display: flex;
  align-items: center;
}

.slider-wrap input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 70px;
  height: 3px;
  background: linear-gradient(to right, rgba(93, 215, 255, 0.8) 0%, rgba(93, 215, 255, 0.8) 70%, rgba(255,255,255,0.15) 70%);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

.slider-wrap input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(93, 215, 255, 1);
  cursor: pointer;
  box-shadow: 0 0 6px rgba(93, 215, 255, 0.6);
}

.art-wrap {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(93, 215, 255, 0.3);
  flex-shrink: 0;
}

.art-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.radio-title {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.4;
  white-space: nowrap;
}

.radio-title span {
  color: rgba(93, 215, 255, 0.85);
  font-size: 8px;
}

/* ===== FISH CANVAS ===== */
.fish-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  filter: blur(0.5px) saturate(0.72);
}

/* ===== SECTIONS ===== */
.section {
  position: relative;
  z-index: 3;
  padding: 80px 60px;
}

/* ===== HERO ===== */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 40px 40px 80px 80px;
  position: relative;
  overflow: hidden;
  z-index: auto;
}

.hero-copy {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  margin-top: -100px;
  border-radius: 20px;
  padding: 44px 40px;
}

.hero-copy h1 {
  font-size: clamp(28px, 3.85vw, 63px);
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
  color: #fff;
  margin-bottom: 28px;
  background: linear-gradient(135deg, #ffffff 30%, rgba(93, 215, 255, 0.9) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.65)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}

.hero-copy p {
  font-size: clamp(13px, 1.2vw, 15px);
  line-height: 1.8;
  color: #ABCBDE;
  margin-bottom: 36px;
  max-width: 480px;
}

/* ===== HERO ORB ===== */
.hero-orb {
  position: absolute;
  right: 1%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: min(1230px, 82vw);
  height: auto;
}

.hero-mobile-space {
  display: none;
}

.hero-submarine {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 2;
  filter:
    drop-shadow(0 0 18px rgba(0, 200, 240, 0.55))
    drop-shadow(0 8px 32px rgba(0, 160, 220, 0.28));
  animation: submarineFloat 6s ease-in-out infinite;
}

@keyframes submarineFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-18px); }
}

/* ===== STATION ROOF BUBBLES ===== */
.station-vent {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 3;
}

.station-bubble {
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.12) 32%, transparent 54%),
    radial-gradient(circle at 50% 50%, rgba(140,230,255,0.22) 0%, transparent 75%);
  box-shadow:
    inset 1px 1px 3px rgba(255,255,255,0.28),
    0 1px 4px rgba(0,0,0,0.18);
  animation: stationBubbleRise linear forwards;
  opacity: 0;
  transform-origin: center bottom;
}

@keyframes stationBubbleRise {
  0%   { opacity: 0;    transform: translateY(0)      translateX(0)    scale(0.6); }
  10%  { opacity: 0.75; transform: translateY(-6%)    translateX(var(--sb-dx, 0px)) scale(1); }
  85%  { opacity: 0.65; }
  100% { opacity: 0;    transform: translateY(-340px) translateX(var(--sb-dx, 0px)) scale(0.8); }
}

.orb-glow {
  position: absolute;
  bottom: -40px;
  left: 10%;
  right: 10%;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(48, 174, 222, 0.18) 0%, transparent 70%);
  z-index: 1;
  animation: orbPulse 6s ease-in-out infinite;
  pointer-events: none;
  filter: blur(12px);
}

@keyframes orbPulse {
  0%, 100% { opacity: 0.6; transform: scaleX(1); }
  50%       { opacity: 1;   transform: scaleX(1.08); }
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-block;
  padding: 13px 32px;
  border-radius: 50px;
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  transition: all 0.3s ease;
}

.liquid-btn {
  background: linear-gradient(135deg, rgba(0, 118, 135, 0.92), rgba(0, 150, 165, 0.82));
  border: 1px solid rgba(0, 195, 215, 0.55);
  color: #fff;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px);
  isolation: isolate;
}

.liquid-btn:hover {
  box-shadow: 0 0 24px rgba(0, 195, 215, 0.45), 0 6px 20px rgba(0,0,0,0.3);
  transform: translateY(-1px);
  border-color: rgba(0, 210, 230, 0.85);
}

.liquid-btn:active {
  transform: translateY(0);
}

/* ===== PORTFOLIO CAROUSEL ===== */
.portfolio-carousel {
  padding: 0px 0 70px;
  margin-top: -40px;
  position: relative;
  z-index: 4;
}

.portfolio-carousel h2 {
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 800;
  text-align: center;
  margin-bottom: 52px;
  color: #fff;
  letter-spacing: 1px;
}

.coverflow-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.coverflow-stage {
  position: relative;
  width: 100%;
  height: 340px;
  perspective: 1200px;
}

.cf-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 480px;
  height: 300px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(93, 215, 255, 0.28);
  transition: transform 0.55s cubic-bezier(0.25, 0.8, 0.25, 1),
              opacity 0.55s ease,
              box-shadow 0.55s ease;
  will-change: transform, opacity;
  user-select: none;
}

.cf-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.cf-card[data-pos="0"] {
  transform: translate(-50%, -50%) translateX(0) scale(1);
  opacity: 1;
  z-index: 5;
  box-shadow: 0 22px 60px rgba(0,0,0,0.75), 0 0 32px rgba(0,170,210,0.28);
}
.cf-card[data-pos="-1"] {
  transform: translate(-50%, -50%) translateX(-315px) scale(0.78) rotateY(10deg);
  opacity: 0.82;
  z-index: 4;
  box-shadow: 0 12px 38px rgba(0,0,0,0.55);
}
.cf-card[data-pos="1"] {
  transform: translate(-50%, -50%) translateX(315px) scale(0.78) rotateY(-10deg);
  opacity: 0.82;
  z-index: 4;
  box-shadow: 0 12px 38px rgba(0,0,0,0.55);
}
.cf-card[data-pos="-2"] {
  transform: translate(-50%, -50%) translateX(-535px) scale(0.58) rotateY(18deg);
  opacity: 0.50;
  z-index: 3;
  box-shadow: 0 8px 22px rgba(0,0,0,0.4);
}
.cf-card[data-pos="2"] {
  transform: translate(-50%, -50%) translateX(535px) scale(0.58) rotateY(-18deg);
  opacity: 0.50;
  z-index: 3;
  box-shadow: 0 8px 22px rgba(0,0,0,0.4);
}
.cf-card[data-pos="-3"] {
  transform: translate(-50%, -50%) translateX(-690px) scale(0.44) rotateY(22deg);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}
.cf-card[data-pos="3"] {
  transform: translate(-50%, -50%) translateX(690px) scale(0.44) rotateY(-22deg);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}

/* ===== LIGHTBOX ===== */
.lb-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.lb-overlay.lb-open {
  opacity: 1;
  pointer-events: all;
}
.lb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(1, 5, 12, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
}
.lb-box {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: min(92vw, 1200px);
  max-height: 90vh;
  border-radius: 20px;
  background: rgba(5, 25, 45, 0.55);
  border: 1px solid rgba(93, 215, 255, 0.18);
  box-shadow:
    0 0 60px rgba(0, 180, 230, 0.18),
    0 24px 64px rgba(0, 0, 0, 0.75);
  padding: 16px;
  transform: scale(0.94);
  transition: transform 0.28s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.lb-overlay.lb-open .lb-box {
  transform: scale(1);
}
.lb-img {
  display: block;
  max-width: min(88vw, 1160px);
  max-height: calc(90vh - 80px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  user-select: none;
}
.lb-close {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(93, 215, 255, 0.35);
  background: rgba(3, 18, 35, 0.92);
  color: rgba(255, 255, 255, 0.85);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  z-index: 2;
}
.lb-close:hover {
  background: rgba(0, 150, 180, 0.7);
  border-color: rgba(93, 215, 255, 0.8);
  color: #fff;
}
.lb-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(93, 215, 255, 0.30);
  background: rgba(3, 18, 35, 0.80);
  color: rgba(255, 255, 255, 0.85);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s, border-color 0.18s;
  z-index: 2;
}
.lb-arrow:hover {
  background: rgba(0, 118, 135, 0.85);
  border-color: rgba(93, 215, 255, 0.75);
}
.lb-prev { left: -22px; }
.lb-next { right: -22px; }
.lb-counter {
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Cairo', sans-serif;
  font-size: 13px;
  color: rgba(171, 203, 222, 0.7);
  letter-spacing: 1px;
  pointer-events: none;
  white-space: nowrap;
}

.cflow-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  background: rgba(0, 100, 118, 0.55);
  border: 1px solid rgba(0, 195, 215, 0.5);
  color: rgba(255,255,255,0.9);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.2s;
  flex-shrink: 0;
}
.cflow-arrow:hover {
  background: rgba(0, 140, 160, 0.82);
  border-color: rgba(0, 210, 230, 0.85);
  box-shadow: 0 0 20px rgba(0, 195, 215, 0.45);
  transform: translateY(-50%) scale(1.08);
}
.cflow-arrow:active {
  transform: translateY(-50%) scale(0.94);
}
/* arrows positioned by JS — fallback only */
.cflow-prev { left: 32px; }
.cflow-next { right: 32px; }
.cflow-arrow svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cf-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.cf-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(93, 215, 255, 0.25);
  border: 1px solid rgba(93, 215, 255, 0.30);
  cursor: pointer;
  transition: background 0.25s, transform 0.25s, border-color 0.25s;
  flex-shrink: 0;
}

.cf-dot.active {
  background: rgba(93, 215, 255, 0.90);
  border-color: rgba(93, 215, 255, 0.90);
  transform: scale(1.45);
}

.cf-dot:hover:not(.active) {
  background: rgba(93, 215, 255, 0.50);
  border-color: rgba(93, 215, 255, 0.60);
}

@media (max-width: 900px) {
  .coverflow-stage { height: 220px; }
  .cf-card { width: 300px; height: 188px; border-radius: 12px; }
  .cf-card[data-pos="-1"] { transform: translate(-50%, -50%) translateX(-196px) scale(0.78) rotateY(10deg); }
  .cf-card[data-pos="1"]  { transform: translate(-50%, -50%) translateX(196px)  scale(0.78) rotateY(-10deg); }
  .cf-card[data-pos="-2"] { transform: translate(-50%, -50%) translateX(-334px) scale(0.58) rotateY(18deg); }
  .cf-card[data-pos="2"]  { transform: translate(-50%, -50%) translateX(334px)  scale(0.58) rotateY(-18deg); }
  .cf-card[data-pos="-3"] { transform: translate(-50%, -50%) translateX(-430px) scale(0.44) rotateY(22deg); }
  .cf-card[data-pos="3"]  { transform: translate(-50%, -50%) translateX(430px)  scale(0.44) rotateY(-22deg); }
  .cflow-prev { left: 8px; }
  .cflow-next { right: 8px; }
}

/* ===== SERVICES ===== */
.services {
  padding: 80px 0;
  position: relative;
  z-index: 4;
}

.services h2 {
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 800;
  text-align: center;
  margin-bottom: 56px;
  padding: 0 60px;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 1px;
  text-shadow: 0 0 40px rgba(93, 215, 255, 0.3);
}

.services .services-heading {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}

.services .services-heading h2 {
  margin: 0;
  padding: 0;
  line-height: 1.15;
}

.services .services-heading p {
  margin: 10px auto 0;
  color: rgba(218,243,252,.72);
  font-size: clamp(13px, 1.2vw, 15px) !important;
  line-height: 1.8 !important;
}

.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 0 60px;
}

/* ===== GLASS CARD ===== */
.glass {
  background: linear-gradient(145deg, rgba(12, 50, 76, 0.7), rgba(5, 20, 34, 0.85));
  border: 1px solid rgba(93, 215, 255, 0.15);
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.service-card {
  border-radius: 0;
  overflow: visible;
  padding: 0;
  display: flex;
  flex-direction: column;
  background: transparent;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  position: relative;
  z-index: 4;
  transition: transform 0.3s ease;
}

.service-card:hover {
  transform: translateY(-3px);
}

.card-img-wrap {
  position: relative;
  isolation: isolate;
  margin: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 14px;
  border: 1px solid rgba(93, 215, 255, 0.28);
  box-shadow: 0 0 10px rgba(93, 215, 255, 0.10), 0 6px 24px rgba(0,0,0,0.45);
  transition: box-shadow 0.4s ease;
}

.service-card:hover .card-img-wrap {
  box-shadow:
    0 0 0 1px rgba(93, 215, 255, 0.35),
    0 0 28px rgba(93, 215, 255, 0.30),
    0 0 60px rgba(93, 215, 255, 0.14),
    0 16px 40px rgba(0, 0, 0, 0.55);
}

.service-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.service-card:hover img {
  transform: scale(1.12);
}

.service-card h3 {
  font-size: 17px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  margin: 14px 4px 8px;
  letter-spacing: 0.5px;
}

.service-card p {
  font-size: 13px;
  line-height: 1.7;
  color: #ABCBDE;
  margin: 0 4px 18px;
  flex: 1;
}

.service-card .btn {
  margin: auto 4px 0;
  text-align: center;
  font-size: 12px;
  padding: 10px 24px;
  align-self: flex-start;
}

/* ===== EXPERIENCE ===== */
.experience.experience-redesign {
  padding: 80px 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: stretch;
  position: relative;
  z-index: 4;
}

.experience-left-panel {
  display: flex;
  flex-direction: column;
}

.experience-label {
  font-size: clamp(22px, 2.5vw, 36px);
  font-weight: 800;
  color: rgba(255, 255, 255, 0.95);
  background: linear-gradient(135deg, #ffffff 30%, rgba(93, 215, 255, 0.85));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 20px 0;
  letter-spacing: -0.5px;
}

.experience-video-card {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(93, 215, 255, 0.15);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  flex: 1;
  display: flex;
  min-height: 0;
  position: relative;
}

.exp-fullscreen-btn {
  position: absolute;
  bottom: 52px;
  right: 12px;
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(3, 18, 35, 0.78);
  border: 1px solid rgba(93, 215, 255, 0.30);
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, opacity 0.18s;
  opacity: 0.7;
}
.exp-fullscreen-btn:hover {
  background: rgba(0, 118, 135, 0.85);
  border-color: rgba(93, 215, 255, 0.75);
  opacity: 1;
}

.home-movie-video.redesigned-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.experience-copy {
  border-radius: 20px;
  padding: 44px 40px;
  position: relative;
  z-index: 4;
}

.experience-copy h4 {
  font-size: 14px;
  font-weight: 600;
  color: rgba(93, 215, 255, 0.8);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.experience-copy p {
  font-size: 16px !important;
  line-height: 1.85;
  color: #ABCBDE;
}

.experience-copy > p:last-of-type {
  margin-bottom: 20px;
}

/* ===== CLIENTS & PARTNERS SECTION ===== */
.clients-section {
  position: relative;
  z-index: 3;
  padding: 72px 0 38px;
  background: linear-gradient(180deg, rgba(1,10,18,0) 0%, rgba(0,18,32,0.72) 40%, rgba(0,18,32,0.72) 60%, rgba(1,10,18,0) 100%);
  overflow: hidden;
}

.clients-heading {
  max-width: 760px;
  margin: 0 auto 28px;
  text-align: center;
}

.clients-kicker {
  display: inline-block;
  margin-bottom: 9px;
  color: rgba(124, 245, 248, .82);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.clients-heading-title {
  margin: 0;
  color: #f6fdff;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.08;
  font-weight: 900;
  text-shadow: 0 8px 28px rgba(0, 0, 0, .48);
}

.clients-heading p {
  margin: 12px auto 0;
  color: rgba(218, 243, 252, .72);
  font-size: 14px;
  line-height: 1.55;
}

.clients-track-wrap {
  position: relative;
  width: 100%;
  margin-top: 22px;
  overflow: hidden;
  /* Fade edges */
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.clients-track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  animation: clientsScroll 60s linear infinite;
}

.clients-track:hover {
  animation-play-state: paused;
}

@keyframes clientsScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.clients-logo-item {
  flex: 0 0 auto;
  width: 252px;
  height: 126px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 34px;
  box-sizing: border-box;
}

.clients-logo-item img {
  max-width: 100%;
  max-height: 90px;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Convert dark logos → white glows on dark ocean bg */
  filter: brightness(0) invert(1) opacity(0.52);
  transition: filter 0.35s ease;
}

.clients-logo-item:hover img {
  filter: brightness(0) invert(1) opacity(0.9);
}


/* ===== FOOTER ===== */
.footer {
  position: relative;
  z-index: 4;
  background: linear-gradient(145deg, rgba(4, 12, 22, 0.98), rgba(2, 8, 16, 1));
  border-top: 1px solid rgba(93, 215, 255, 0.1);
  padding: 64px 60px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
}

.footer h3 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(93, 215, 255, 0.7);
  margin-bottom: 20px;
}

.footer-logo-img {
  width: 40px;
  height: auto;
  margin-bottom: 16px;
  filter: drop-shadow(0 0 8px rgba(93, 215, 255, 0.4));
}

.footer p {
  font-size: 13px;
  line-height: 1.8;
  color: #ABCBDE;
}

.footer a {
  display: block;
  font-size: 13px;
  color: #ABCBDE;
  padding: 4px 0;
  transition: color 0.2s;
}

.footer a:hover {
  color: rgba(93, 215, 255, 0.9);
}

.footer a.footer-email,
.footer a.footer-phone {
  display: inline;
  line-height: inherit;
  padding: 0;
}

.footer-contact-lines {
  display: inline-block;
  margin-top: 8px;
}

.footer input {
  width: 100%;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50px;
  color: #fff;
  font-family: 'Cairo', sans-serif;
  font-size: 13px;
  outline: none;
  margin-bottom: 10px;
  transition: border-color 0.2s;
}

.footer input:focus {
  border-color: rgba(93, 215, 255, 0.4);
}

.footer input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.footer .subscribe {
  width: 100%;
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 13px 32px;
  border-radius: 50px;
  cursor: pointer;
  border: none;
}

.copyright {
  position: relative;
  z-index: 4;
  background: rgba(2, 8, 16, 1);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 18px 60px;
  font-size: 11px;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.25);
  text-align: center;
}

/* ===== ABOUT PAGE ===== */
.about-main {
  padding: 0;
}

.about-hero {
  padding: 80px 60px;
}

.about-hero h1 {
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 800;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 40px;
  background: linear-gradient(135deg, #ffffff 30%, rgba(93, 215, 255, 0.85));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.about-intro {
  max-width: 760px;
  margin-bottom: 64px;
}

.about-intro p {
  font-size: 15px;
  line-height: 1.9;
  color: #ABCBDE;
  margin-bottom: 16px;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: start;
}

.about-card {
  align-self: start;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  padding: 28px;
  background: linear-gradient(145deg, rgba(12, 50, 76, 0.65), rgba(5, 20, 34, 0.8));
  border: 1px solid rgba(93, 215, 255, 0.13);
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: border-color 0.3s, transform 0.3s;
}

.about-card:hover {
  border-color: rgba(93, 215, 255, 0.28);
  transform: translateY(-4px);
}

.about-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(93, 215, 255, 0.28);
  box-shadow: 0 0 10px rgba(93, 215, 255, 0.12), 0 4px 18px rgba(0,0,0,0.4);
  order: 0;
}

.about-card p {
  font-size: 13px;
  line-height: 1.85;
  color: #ABCBDE;
  flex: 1;
  order: 1;
  margin: 0;
}

.about-card .btn {
  align-self: flex-start;
  margin-top: auto;
  font-size: 12px;
  padding: 10px 24px;
  order: 2;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: rgba(4, 14, 24, 0.8);
}

::-webkit-scrollbar-thumb {
  background: rgba(93, 215, 255, 0.25);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(93, 215, 255, 0.5);
}

/* ===== MOBILE / TABLET TOP-BAR ELEMENTS (hidden on desktop) ===== */
.mobile-bar-bg {
  display: none;
}
.mobile-logo {
  display: none;
}
.mobile-logo img {
  width: 38px;
  height: auto;
  filter: drop-shadow(0 0 8px rgba(93, 215, 255, 0.45));
}

/* ===== FOOTER SOCIAL ROW ===== */
.footer-social-row {
  display: none;
  grid-column: 1 / -1;
  padding-top: 28px;
  border-top: 1px solid rgba(93, 215, 255, 0.1);
  flex-direction: row;
  gap: 14px;
  align-items: center;
  justify-content: center;
}

.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: rgba(93, 215, 255, 0.07);
  border: 1px solid rgba(93, 215, 255, 0.2);
  border-radius: 12px;
  color: rgba(93, 215, 255, 0.75);
  transition: background 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.25s;
  flex-shrink: 0;
}

.footer-social-link svg {
  width: 28px;
  height: 28px;
  display: block;
}

.footer-social-link:hover {
  background: rgba(93, 215, 255, 0.18);
  border-color: rgba(93, 215, 255, 0.55);
  color: #5dd7ff;
  box-shadow: 0 0 14px rgba(93, 215, 255, 0.2);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .about-grid {
    grid-template-columns: 1fr;
  }
  .experience.experience-redesign {
    grid-template-columns: 1fr;
  }
}

/* ===== TABLET + MOBILE: shared top bar (logo | radio | hamburger) ===== */
@media (max-width: 1024px) {
  .site-frame {
    left: 0;
    width: 100vw;
    top: 60px;
    height: calc(100vh - 60px);
  }

  /* semi-transparent bar background — below all controls */
  .mobile-bar-bg {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(180deg, rgba(4, 14, 24, 0.96) 0%, rgba(6, 22, 36, 0.92) 100%);
    border-bottom: 1px solid rgba(93, 215, 255, 0.12);
    backdrop-filter: blur(14px);
    z-index: 790;
  }

  /* logo on the left of the bar */
  .mobile-logo {
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: -18px;
    height: 60px;
    padding-left: 16px;
    z-index: 950;
    text-decoration: none;
  }

  /* hamburger: vertically centred in 60px bar */
  .hamburger {
    top: 4px;
    right: 12px;
    width: 52px;
    height: 52px;
  }

  /* radio: sits just left of the hamburger */
  .top-bar-right {
    top: 4px;
    right: 72px;
    gap: 0;
  }

  .social-bar {
    display: none;
  }

  .radio-player {
    height: 52px;
    padding: 0 12px;
    gap: 7px;
  }

  .radio-cover.custom-cover {
    gap: 7px;
  }

  .slider-wrap input[type="range"] {
    width: 44px;
  }

  /* show social icons in footer */
  .footer-social-row {
    display: flex;
  }

  /* ---- Tablet hero: submarine on top, text below ---- */
  .hero {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 32px 30px;
    min-height: auto;
    gap: 0;
  }

  .hero-copy {
    order: 2;
    margin-top: 10px;
    max-width: 100%;
    width: 100%;
  }

  .hero-orb {
    order: 1;
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: min(900px, 80vw);
    height: auto;
    margin: 0 auto 0;
  }

  .hero-mobile-space {
    display: block;
    order: 0;
    width: 60%;
    max-width: 300px;
    height: auto;
    margin: 30px auto 0;
  }
}

@media (max-width: 1280px) and (min-width: 1025px) {
  /* ---- Laptop: shrink heading + submarine so both sides fully visible ---- */
  .hero {
    min-height: 70vh;
  }
  .hero-copy h1 {
    font-size: clamp(22px, 3.1vw, 48px);
  }
  .hero-orb {
    width: min(680px, 50vw);
    right: 0;
  }
}

@media (max-width: 768px) {
  /* ---- Hero: circular video on top, text below ---- */
  .hero {
    flex-direction: column;
    align-items: center;
    padding: 0px 20px 30px;
    text-align: center;
    min-height: auto;
    gap: 0;
  }

  .hero-mobile-space {
    display: block;
    order: 0;
    width: 48%;
    max-width: 240px;
    height: auto;
    margin: 0 auto;
  }

  .hero-copy {
    max-width: 78%;
    width: 78%;
    order: 2;
    margin-top: 8px;
    padding: 28px 24px;
  }

  .hero-copy p {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-orb {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    order: 1;
    width: min(700px, 98vw);
    height: auto;
    margin: 0 auto;
  }

  /* ---- Radio and hamburger same height ---- */
  .radio-player {
    height: 52px;
    padding: 0 12px;
    gap: 7px;
  }

  /* ---- Non-hero sections: 90% effective width on mobile ---- */
  .section {
    padding: 60px 5%;
  }

  .section:not(.hero) .glass {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .services {
    padding: 60px 5%;
  }

  .services h2 {
    margin-bottom: 36px;
  }

  .cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* ---- Experience: single column, video natural height ---- */
  .experience.experience-redesign {
    padding: 60px 5%;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
  }

  .experience-video-card {
    flex: none;
    min-height: auto;
  }

  .home-movie-video.redesigned-video {
    height: auto;
    object-fit: unset;
  }

  .experience-copy {
    padding: 28px 24px;
  }

  .footer {
    grid-template-columns: 1fr 1fr;
    padding: 48px 5%;
    gap: 32px;
  }

  .copyright {
    padding: 16px 5%;
  }

  .about-hero {
    padding: 60px 5%;
  }

  .about-grid {
    grid-template-columns: 1fr;
  }

  .radio-title {
    display: none;
  }

  .art-wrap {
    width: 26px;
    height: 26px;
  }

  .player-icon.headphones-img {
    width: 22px;
    height: 22px;
  }

  .fullscreen-menu {
    width: 100vw;
  }

  .fullscreen-menu .menu-inner a {
    font-size: 28px;
  }
}

@media (max-width: 480px) {
  .footer {
    grid-template-columns: 1fr;
  }
  .cards {
    grid-template-columns: 1fr;
  }
}

/* ===== GSAP ANIMATION HELPERS ===== */
.section-fade {
  opacity: 0;
  transform: translateY(30px);
}

.section-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

/* Production cleanup: decorative bubbles fallback */
.artlantic-bubbles {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.artlantic-bubbles span {
  position: absolute;
  bottom: -60px;
  display: block;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.75), rgba(105,203,255,.18) 45%, rgba(37,118,185,.05) 75%);
  border: 1px solid rgba(180,231,255,.22);
  filter: blur(.15px);
  animation: artlanticBubbleRise linear infinite;
}
@keyframes artlanticBubbleRise {
  0% { transform: translate3d(0, 0, 0) scale(.75); }
  50% { transform: translate3d(18px, -48vh, 0) scale(1); }
  100% { transform: translate3d(-12px, -105vh, 0) scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .artlantic-bubbles { display: none; }
}


/* v5 alignment fix: keep first image row/cards on the same baseline */
.cards,
.uid-gallery {
  align-items: start;
}
.service-card,
.uid-thumb,
.uid-card,
.uid-vid-card {
  align-self: start;
}
.card-img-wrap,
.uid-card-img-wrap {
  line-height: 0;
}
.card-img-wrap img,
.uid-thumb img,
.uid-card-img,
.uid-vid-card img {
  vertical-align: top;
}

/* ===== v6 link fixes ===== */
.mobile-logo, .menu-logo-link, .footer-logo-link {
  cursor: pointer;
  text-decoration: none;
}
.menu-logo-link {
  display: inline-block;
  color: inherit;
}
.footer-logo-link {
  display: inline-block;
  line-height: 0;
}
.footer-logo-link .footer-logo-img {
  display: block;
}


/* About page alignment fix: all first-row cards start at the same Y position. */
.about-grid > .about-card {
  margin-top: 0 !important;
  transform: none;
}
.about-card img {
  order: 0 !important;
  flex: 0 0 200px;
}
.about-card p {
  order: 1 !important;
}
.about-card .btn {
  order: 2 !important;
}

/* ===== v14 UI polish ===== */
.radio-title span,
.radio-live {
  color: #00ff88 !important;
  animation: radioLiveBlink 1.8s ease-in-out infinite;
  text-shadow: 0 0 8px rgba(0,255,136,0.65), 0 0 14px rgba(0,255,136,0.35);
}

@keyframes radioLiveBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.fullscreen-menu .menu-inner .menu-logo,
.fullscreen-menu .menu-inner .menu-logo-link {
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 2px !important;
  opacity: 0.72;
  margin-bottom: 28px;
  border-bottom: none !important;
  padding: 0 !important;
}

.fullscreen-menu .menu-inner .menu-logo:hover,
.fullscreen-menu .menu-inner .menu-logo-link:hover {
  letter-spacing: 2px !important;
  padding-left: 0 !important;
}

.contact-page .ct-social,
.ct-social {
  display: none !important;
}

/* ===== v15 mobile/tablet overflow + home width fix ===== */
html,
body,
.frame-page,
#app {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

/* Fallback for browsers that do not fully support overflow: clip */
@supports not (overflow: clip) {
  html,
  body,
  .frame-page,
  #app {
    overflow-x: hidden;
  }
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

/* Prevent animated/wide homepage elements from creating horizontal drag on touch devices. */
.portfolio-carousel,
.coverflow-wrap,
.coverflow-stage,
.clients-section,
.clients-track-wrap,
.hero,
.services,
.experience.experience-redesign,
.footer {
  max-width: 100%;
  overflow-x: clip;
}

@supports not (overflow: clip) {
  .portfolio-carousel,
  .coverflow-wrap,
  .coverflow-stage,
  .clients-section,
  .clients-track-wrap,
  .hero,
  .services,
  .experience.experience-redesign,
  .footer {
    overflow-x: hidden;
  }
}

@media (max-width: 1024px) {
  .section {
    padding-left: clamp(18px, 4vw, 36px);
    padding-right: clamp(18px, 4vw, 36px);
  }

  .hero {
    width: 100%;
    padding-left: clamp(18px, 4vw, 36px);
    padding-right: clamp(18px, 4vw, 36px);
  }

  .hero-copy {
    width: 100%;
    max-width: 100%;
    padding: clamp(26px, 4vw, 38px) clamp(22px, 4vw, 34px);
  }

  .hero-copy p {
    max-width: 100%;
  }

  .services {
    padding-left: clamp(18px, 4vw, 36px);
    padding-right: clamp(18px, 4vw, 36px);
  }

  .services h2 {
    padding-left: 0;
    padding-right: 0;
  }

  .cards {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    gap: 22px;
  }

  .experience.experience-redesign {
    padding-left: clamp(18px, 4vw, 36px);
    padding-right: clamp(18px, 4vw, 36px);
  }

  .experience-copy {
    width: 100%;
    max-width: 100%;
  }

  .footer {
    padding-left: clamp(18px, 4vw, 36px);
    padding-right: clamp(18px, 4vw, 36px);
  }
}

@media (max-width: 768px) {
  .section,
  .services,
  .experience.experience-redesign,
  .footer,
  .copyright,
  .about-hero {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .hero {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .hero-copy {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0;
    margin-right: 0;
    padding: 26px 22px !important;
  }

  .hero-copy h1 {
    white-space: normal;
  }

  .hero-copy p,
  .experience-copy p,
  .service-card p {
    max-width: 100%;
  }

  .cards {
    grid-template-columns: 1fr !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 26px;
  }

  .service-card,
  .experience-copy,
  .experience-video-card,
  .glass {
    width: 100%;
    max-width: 100%;
  }

  /* Mobile coverflow: show a clean central carousel without off-screen cards widening the page. */
  .portfolio-carousel {
    padding-left: 18px;
    padding-right: 18px;
  }

  .coverflow-stage {
    height: 220px;
    overflow: hidden !important;
    perspective: none;
  }

  .cf-card {
    width: min(100%, 340px) !important;
    height: 210px !important;
    left: 50%;
    top: 50%;
  }

  .cf-card[data-pos="0"] {
    transform: translate(-50%, -50%) scale(1) !important;
    opacity: 1;
    z-index: 5;
    pointer-events: auto;
  }

  .cf-card:not([data-pos="0"]) {
    transform: translate(-50%, -50%) scale(0.9) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .cflow-prev { left: 0; }
  .cflow-next { right: 0; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===== v16 mobile radio/menu/buttons polish ===== */
@media (max-width: 1024px) {
  .fullscreen-menu {
    justify-content: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    padding-top: 72px;
    padding-bottom: 40px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .menu-inner {
    width: 100%;
    flex: 0 0 auto;
  }

  /* Make the player fill the empty space between mobile logo and hamburger. */
  .top-bar-right {
    left: 66px !important;
    right: 72px !important;
    width: auto !important;
  }

  .radio-player {
    width: 100% !important;
    max-width: none !important;
    justify-content: flex-start;
    padding: 0 10px !important;
  }

  .radio-cover.custom-cover {
    flex: 1 1 auto;
    min-width: 0;
  }

  .radio-title {
    display: block !important;
    font-size: 8px;
    letter-spacing: 1.4px;
    line-height: 1.25;
  }

  .radio-title span,
  .radio-live {
    font-size: 7px;
    letter-spacing: 1.6px;
  }

  /* Match the mobile Work parent item to the other menu links. */
  .menu-parent-label {
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.2;
  }
}

@media (max-width: 520px) {
  .top-bar-right {
    left: 60px !important;
    right: 68px !important;
  }

  .radio-player {
    gap: 5px !important;
    padding: 0 8px !important;
  }

  .radio-cover.custom-cover {
    gap: 6px !important;
  }

  .player-icon.headphones-img {
    display: none !important;
  }

  .art-wrap {
    width: 24px !important;
    height: 24px !important;
  }

  .slider-wrap input[type="range"] {
    width: 34px !important;
  }

  .radio-title {
    font-size: 7px !important;
    letter-spacing: 1.1px !important;
  }

  .radio-title span,
  .radio-live {
    font-size: 6px !important;
    letter-spacing: 1.2px !important;
  }
}

@media (max-width: 380px) {
  .slider-wrap { display: none !important; }
  .radio-play.image-play { width: 34px; height: 34px; }
}

/* Stop service buttons from trembling on hover by avoiding layout-affecting transforms. */
.services .service-card .btn,
.services .service-card .liquid-btn {
  transform: translateZ(0);
  will-change: box-shadow;
  transition: box-shadow 0.25s ease, border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}

.services .service-card .liquid-btn:hover,
.services .service-card .btn:hover {
  transform: translateZ(0) !important;
  letter-spacing: 1.5px !important;
  padding-left: 24px !important;
}

.services .service-card:hover {
  transform: none !important;
}

/* v17: mobile footer icons use the same round desktop social style */
.footer-social-row {
  gap: 12px;
}
.footer-social-link {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(6, 20, 34, 0.82);
  border: 1px solid rgba(93, 215, 255, 0.22);
  color: rgba(93, 215, 255, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.footer-social-link svg {
  width: 16px;
  height: 16px;
}
.footer-social-link:hover {
  background: rgba(0, 118, 135, 0.6);
  border-color: rgba(93, 215, 255, 0.55);
  color: rgba(93, 215, 255, 0.95);
  box-shadow: 0 0 10px rgba(93, 215, 255, 0.2);
}

/* v17: YouTube video with original poster retained */
.youtube-video-wrap.home-movie-video.redesigned-video {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 0;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(0, 14, 24, 0.7);
}
.youtube-poster-button {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
}
.youtube-poster-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.youtube-play-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 74px;
  height: 74px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background: rgba(0, 165, 190, 0.82);
  border: 1px solid rgba(130, 235, 255, 0.65);
  box-shadow: 0 14px 34px rgba(0,0,0,0.28), 0 0 24px rgba(93,215,255,0.35);
  transition: transform 0.25s ease, background 0.25s ease;
}
.youtube-poster-button:hover .youtube-play-badge {
  transform: translate(-50%, -50%) scale(1.06);
  background: rgba(0, 190, 210, 0.95);
}
.youtube-video-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.experience-video-card:fullscreen {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
.experience-video-card:fullscreen .youtube-video-wrap {
  width: min(100vw, 177.77vh);
  height: min(56.25vw, 100vh);
  max-width: 100vw;
  max-height: 100vh;
  border-radius: 0;
}

/* v19: lift the submarine 40% more on mobile home */
@media (max-width: 768px) {
  .hero-orb {
    margin-top: -34px;
    margin-bottom: -4px;
  }
  .youtube-play-badge {
    width: 58px;
    height: 58px;
  }
}
@media (max-width: 480px) {
  .hero-orb {
    margin-top: -42px;
    margin-bottom: -8px;
  }
}
.contact-page .ct-social,
.ct-social {
  display: none !important;
}

/* ===== v20 mobile radio headphones fix ===== */
@media (max-width: 520px) {
  .player-icon.headphones-img {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    opacity: 0.9 !important;
    flex: 0 0 auto !important;
  }

  .radio-player {
    gap: 6px !important;
  }

  .radio-play.image-play {
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
  }
}

@media (max-width: 380px) {
  .player-icon.headphones-img {
    width: 20px !important;
    height: 20px !important;
  }

  .radio-player {
    gap: 5px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}

/* v21: mobile footer social icons exact centering fix */
.footer-social-row {
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-social-link,
.footer-social-link:link,
.footer-social-link:visited {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  text-align: center !important;
  vertical-align: middle !important;
}
.footer-social-link svg,
.footer-social-link img,
.footer-social-link i {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  transform: none !important;
  flex: 0 0 auto !important;
}
@media (max-width: 768px) {
  .site-footer .footer-social-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .site-footer .footer-social-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* v27: Our Services hover stability fix
   Keep service boxes/cards completely static. Only the Read More button reacts visually. */
.services .service-card,
.services .service-card:hover,
.services .service-card:focus-within {
  transform: none !important;
  translate: none !important;
  scale: none !important;
  rotate: none !important;
  transition: none !important;
}

.services .service-card:hover .card-img-wrap,
.services .service-card:focus-within .card-img-wrap {
  box-shadow: 0 0 10px rgba(93, 215, 255, 0.10), 0 6px 24px rgba(0,0,0,0.45) !important;
  transform: none !important;
}

.services .service-card:hover img,
.services .service-card:focus-within img {
  transform: none !important;
}

.services .service-card .btn,
.services .service-card .liquid-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  box-sizing: border-box;
  min-height: 48px;
  padding: 13px 32px !important;
  letter-spacing: 1.5px !important;
  transform: none !important;
  will-change: auto !important;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease !important;
}

.services .service-card .btn:hover,
.services .service-card .liquid-btn:hover,
.services .service-card .btn:focus-visible,
.services .service-card .liquid-btn:focus-visible {
  transform: none !important;
  padding: 13px 32px !important;
  letter-spacing: 1.5px !important;
  box-shadow: 0 0 24px rgba(0, 195, 215, 0.45), 0 6px 20px rgba(0,0,0,0.3) !important;
  border-color: rgba(0, 210, 230, 0.85) !important;
}

.services .service-card .btn:active,
.services .service-card .liquid-btn:active {
  transform: none !important;
}

/* v39: Floating avatar-to-video promo widget */
.floating-video-widget {
  position: fixed;
  left: 24px;
  bottom: 24px;
  width: 200px;
  height: 200px;
  z-index: 9997;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  transform-origin: left bottom;
  filter: drop-shadow(0 18px 38px rgba(0, 0, 0, 0.45));
  transition: width 620ms cubic-bezier(.18, 1.45, .32, 1),
              height 620ms cubic-bezier(.18, 1.45, .32, 1),
              transform 620ms cubic-bezier(.18, 1.45, .32, 1),
              filter 300ms ease;
}

.floating-video-widget:hover:not(.is-open) {
  transform: translateY(-4px) scale(1.03);
  filter: drop-shadow(0 22px 46px rgba(0, 220, 255, 0.22)) drop-shadow(0 18px 38px rgba(0, 0, 0, 0.45));
}

.floating-video-avatar,
.floating-video-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.floating-video-avatar {
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25), 0 0 22px rgba(69, 206, 255, 0.16);
  opacity: 1;
  transition: opacity 260ms ease, transform 620ms cubic-bezier(.18, 1.45, .32, 1), border-radius 620ms cubic-bezier(.18, 1.45, .32, 1);
}

.floating-video-player {
  border-radius: 34px;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 20px 70px rgba(0,0,0,0.55), 0 0 0 1px rgba(114,218,255,0.25);
  transition: opacity 260ms ease 160ms, border-radius 620ms cubic-bezier(.18, 1.45, .32, 1);
  background: #020b14;
}

.floating-video-widget.is-open {
  width: min(560px, calc(100vw - 48px));
  height: min(315px, calc((100vw - 48px) * 0.5625));
  transform: translateY(-8px) scale(1);
  filter: drop-shadow(0 28px 70px rgba(0,0,0,0.62));
}

.floating-video-widget.is-open .floating-video-avatar {
  opacity: 0;
  transform: scale(0.72);
  border-radius: 34px;
}

.floating-video-widget.is-open .floating-video-player {
  opacity: 1;
  pointer-events: auto;
}

.floating-video-close {
  position: absolute;
  top: -13px;
  right: -13px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(4, 16, 29, 0.92);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0,0,0,0.45);
}

.floating-video-widget.is-open .floating-video-close {
  display: inline-flex;
}

@media (max-width: 768px) {
  .floating-video-widget {
    width: 126px;
    height: 126px;
    left: 16px;
    bottom: 18px;
  }
  .floating-video-widget.is-open {
    left: 14px;
    bottom: 18px;
    width: calc(100vw - 28px);
    height: calc((100vw - 28px) * 0.5625);
  }
}

/* v41: hero title + avatar video placement refinements */
.hero-copy {
  overflow: visible !important;
}

.hero-copy h1 {
  font-size: clamp(25px, 3.35vw, 56px) !important;
}

.hero-copy .hero-video-widget,
.hero-video-widget {
  position: absolute !important;
  left: 34px !important;
  top: -112px !important;
  bottom: auto !important;
  width: 160px !important;
  height: 160px !important;
  z-index: 20 !important;
  transform-origin: center center !important;
}

.hero-video-widget:hover:not(.is-open) {
  transform: translateY(-4px) scale(1.035) !important;
}

.hero-video-widget.is-open {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  bottom: auto !important;
  width: min(390px, 84vw) !important;
  height: min(690px, 84vh) !important;
  transform: translate(-50%, -50%) scale(1) !important;
  z-index: 10050 !important;
  filter: drop-shadow(0 34px 84px rgba(0, 0, 0, 0.72)) !important;
}

.hero-video-widget.is-open .floating-video-player {
  object-fit: contain !important;
  border-radius: 34px !important;
  background: #020b14 !important;
}

.hero-video-widget.is-open .floating-video-avatar {
  border-radius: 34px !important;
}

.hero-video-widget .floating-video-close {
  z-index: 4 !important;
}

body.floating-video-open::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10040;
  background: rgba(0, 8, 16, 0.52);
  backdrop-filter: blur(5px);
  pointer-events: none;
}

@media (max-width: 1024px) {
  .hero-copy h1 {
    font-size: clamp(24px, 5vw, 44px) !important;
  }
  .hero-copy .hero-video-widget,
  .hero-video-widget {
    width: 135px !important;
    height: 135px !important;
    top: -92px !important;
    left: 28px !important;
  }
}

@media (max-width: 768px) {
  .hero-copy {
    margin-top: 48px !important;
  }
  .hero-copy h1 {
    font-size: clamp(24px, 8vw, 34px) !important;
  }
  .hero-copy .hero-video-widget,
  .hero-video-widget {
    width: 118px !important;
    height: 118px !important;
    top: -74px !important;
    left: 22px !important;
  }
  .hero-video-widget.is-open {
    width: min(360px, 88vw) !important;
    height: min(640px, 82vh) !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* v42: hero video widget position + no blur overlay */
body.floating-video-open::after {
  background: rgba(0, 8, 16, 0.34) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.hero-copy .hero-video-widget,
.hero-video-widget {
  left: auto !important;
  top: auto !important;
  right: -56px !important;
  bottom: -56px !important;
  width: 160px !important;
  height: 160px !important;
  transform-origin: center center !important;
}

.hero-video-widget:hover:not(.is-open) {
  transform: translateY(-3px) scale(1.035) !important;
}

.hero-video-widget.is-open {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: min(390px, 84vw) !important;
  height: min(690px, 84vh) !important;
  transform: translate(-50%, -50%) scale(1) !important;
  z-index: 10050 !important;
}

.hero-video-widget.is-open .floating-video-player {
  object-fit: contain !important;
  border-radius: 34px !important;
  background: #020b14 !important;
}

@media (max-width: 1024px) {
  .hero-copy .hero-video-widget,
  .hero-video-widget {
    width: 135px !important;
    height: 135px !important;
    right: -36px !important;
    bottom: -48px !important;
    left: auto !important;
    top: auto !important;
  }
}

@media (max-width: 768px) {
  .hero-copy .hero-video-widget,
  .hero-video-widget {
    width: 118px !important;
    height: 118px !important;
    right: -18px !important;
    bottom: -42px !important;
    left: auto !important;
    top: auto !important;
  }
  .hero-video-widget.is-open {
    width: min(360px, 88vw) !important;
    height: min(640px, 82vh) !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }
}


/* v44: clean centered portrait video + name caption */
body.floating-video-open::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 0 !important;
}

.hero-video-widget.is-open {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: min(390px, 84vw) !important;
  height: min(690px, 78vh) !important;
  transform: translate(-50%, -50%) scale(1) !important;
  z-index: 10050 !important;
  background: transparent !important;
  opacity: 1 !important;
  filter: drop-shadow(0 34px 84px rgba(0,0,0,0.72)) !important;
}

.hero-video-widget.is-open .floating-video-player {
  opacity: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 34px !important;
  background: transparent !important;
  filter: none !important;
  transform: translateZ(0) !important;
}

.hero-video-widget.is-open .floating-video-avatar {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.floating-video-caption {
  display: none;
  position: absolute;
  left: 50%;
  top: calc(100% + 14px);
  transform: translateX(-50%);
  width: max-content;
  max-width: 92vw;
  text-align: center;
  color: #ffffff;
  text-shadow: 0 2px 18px rgba(0,0,0,0.85);
  pointer-events: none;
}

.hero-video-widget.is-open .floating-video-caption {
  display: block !important;
}

.floating-video-caption strong,
.floating-video-caption small {
  display: block;
}

.floating-video-caption strong {
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.floating-video-caption small {
  margin-top: 5px;
  font-size: clamp(12px, 1.3vw, 16px);
  line-height: 1.3;
  font-weight: 500;
  opacity: 0.84;
  letter-spacing: 0.04em;
}

@media (max-width: 768px) {
  .hero-video-widget.is-open {
    width: min(350px, 88vw) !important;
    height: min(620px, 74vh) !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }
  .floating-video-caption {
    top: calc(100% + 10px);
  }
}

/* v46: WhatsApp left + avatar video widget right, opens directly above icon */
.hero-copy .hero-video-widget,
.hero-video-widget,
.floating-video-widget.hero-video-widget {
  position: fixed !important;
  left: auto !important;
  top: auto !important;
  right: 24px !important;
  bottom: 24px !important;
  width: 160px !important;
  height: 160px !important;
  z-index: 10020 !important;
  transform: none !important;
  transform-origin: right bottom !important;
  background: transparent !important;
}

.hero-video-widget:hover:not(.is-open) {
  transform: translateY(-3px) scale(1.035) !important;
}

.hero-video-widget.is-open,
.floating-video-widget.hero-video-widget.is-open {
  position: fixed !important;
  left: auto !important;
  top: auto !important;
  right: 24px !important;
  bottom: 204px !important; /* directly above the 160px icon + 20px gap */
  width: min(360px, calc(100vw - 48px)) !important;
  height: min(360px, calc(100vw - 48px)) !important;
  aspect-ratio: 1 / 1 !important;
  transform: none !important;
  z-index: 10050 !important;
  background: transparent !important;
  opacity: 1 !important;
  filter: drop-shadow(0 24px 58px rgba(0,0,0,0.68)) !important;
  overflow: visible !important;
}

.hero-video-widget.is-open .floating-video-player {
  display: block !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 30px !important;
  background: transparent !important;
  filter: none !important;
  transform: translateZ(0) !important;
  box-shadow: 0 20px 64px rgba(0,0,0,0.55), 0 0 0 1px rgba(114,218,255,0.22) !important;
}

.hero-video-widget.is-open .floating-video-avatar {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.floating-video-open::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.hero-video-widget.is-open .floating-video-caption {
  display: block !important;
  top: calc(100% + 10px) !important;
}

@media (max-width: 768px) {
  .hero-copy .hero-video-widget,
  .hero-video-widget,
  .floating-video-widget.hero-video-widget {
    right: 16px !important;
    bottom: 18px !important;
    width: 118px !important;
    height: 118px !important;
  }
  .hero-video-widget.is-open,
  .floating-video-widget.hero-video-widget.is-open {
    right: 16px !important;
    bottom: 150px !important;
    width: min(320px, calc(100vw - 32px)) !important;
    height: min(320px, calc(100vw - 32px)) !important;
  }
}

/* v47: responsive fixed bottom-right video avatar, video opens directly above icon on all screens */
:root {
  --avatar-widget-size: 160px;
  --avatar-widget-gap: 18px;
  --avatar-widget-edge: 24px;
}

.hero-copy .hero-video-widget,
.hero-video-widget,
.floating-video-widget.hero-video-widget {
  position: fixed !important;
  left: auto !important;
  top: auto !important;
  right: var(--avatar-widget-edge) !important;
  bottom: var(--avatar-widget-edge) !important;
  width: var(--avatar-widget-size) !important;
  height: var(--avatar-widget-size) !important;
  aspect-ratio: 1 / 1 !important;
  z-index: 10020 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  transform: translate3d(0,0,0) !important;
  transform-origin: right bottom !important;
  overflow: visible !important;
}

.hero-video-widget:hover:not(.is-open),
.floating-video-widget.hero-video-widget:hover:not(.is-open) {
  transform: translate3d(0,-3px,0) scale(1.035) !important;
}

.hero-video-widget.is-open,
.floating-video-widget.hero-video-widget.is-open {
  position: fixed !important;
  left: auto !important;
  top: auto !important;
  right: var(--avatar-widget-edge) !important;
  bottom: calc(var(--avatar-widget-edge) + var(--avatar-widget-size) + var(--avatar-widget-gap)) !important;
  width: min(360px, calc(100vw - (var(--avatar-widget-edge) * 2))) !important;
  height: min(360px, calc(100vw - (var(--avatar-widget-edge) * 2)), calc(100vh - var(--avatar-widget-size) - var(--avatar-widget-gap) - (var(--avatar-widget-edge) * 2))) !important;
  aspect-ratio: 1 / 1 !important;
  z-index: 10050 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  opacity: 1 !important;
  transform: translate3d(0,0,0) !important;
  filter: drop-shadow(0 24px 58px rgba(0,0,0,0.68)) !important;
  overflow: visible !important;
}

.hero-video-widget.is-open .floating-video-player,
.floating-video-widget.hero-video-widget.is-open .floating-video-player {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 30px !important;
  background: transparent !important;
  filter: none !important;
  transform: translateZ(0) !important;
  box-shadow: 0 20px 64px rgba(0,0,0,0.55), 0 0 0 1px rgba(114,218,255,0.22) !important;
}

.hero-video-widget.is-open .floating-video-avatar,
.floating-video-widget.hero-video-widget.is-open .floating-video-avatar {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.hero-video-widget.is-open .floating-video-caption,
.floating-video-widget.hero-video-widget.is-open .floating-video-caption {
  display: block !important;
  top: calc(100% + 10px) !important;
}

body.floating-video-open::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@media (max-width: 1024px) {
  :root {
    --avatar-widget-size: 135px;
    --avatar-widget-gap: 16px;
    --avatar-widget-edge: 20px;
  }
}

@media (max-width: 768px) {
  :root {
    --avatar-widget-size: 118px;
    --avatar-widget-gap: 14px;
    --avatar-widget-edge: 16px;
  }

  .hero-video-widget.is-open,
  .floating-video-widget.hero-video-widget.is-open {
    width: min(320px, calc(100vw - 32px)) !important;
    height: min(320px, calc(100vw - 32px), calc(100vh - 118px - 14px - 32px)) !important;
    right: 16px !important;
    bottom: calc(16px + 118px + 14px) !important;
  }
}

/* v48 FINAL: fixed bottom-right avatar icon; video opens above the icon without moving the icon */
:root {
  --avatar-widget-size: 160px;
  --avatar-widget-edge: 24px;
  --avatar-video-gap: 18px;
  --avatar-video-width: min(330px, calc(100vw - 48px));
}

.hero-video-widget,
.floating-video-widget.hero-video-widget {
  position: fixed !important;
  right: var(--avatar-widget-edge) !important;
  bottom: var(--avatar-widget-edge) !important;
  left: auto !important;
  top: auto !important;
  width: var(--avatar-widget-size) !important;
  height: var(--avatar-widget-size) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  z-index: 100000 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  overflow: visible !important;
  cursor: pointer !important;
  transform: translate3d(0,0,0) !important;
  transform-origin: center center !important;
  filter: none !important;
}

.hero-video-widget:hover:not(.is-open),
.floating-video-widget.hero-video-widget:hover:not(.is-open) {
  transform: translate3d(0,-3px,0) scale(1.03) !important;
}

.hero-video-widget .floating-video-avatar,
.floating-video-widget.hero-video-widget .floating-video-avatar {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.38), 0 0 0 5px rgba(255,255,255,.92), 0 0 28px rgba(98,210,255,.28) !important;
  transition: transform .35s ease, box-shadow .35s ease !important;
}

.hero-video-widget.is-open,
.floating-video-widget.hero-video-widget.is-open {
  right: var(--avatar-widget-edge) !important;
  bottom: var(--avatar-widget-edge) !important;
  width: var(--avatar-widget-size) !important;
  height: var(--avatar-widget-size) !important;
  aspect-ratio: 1 / 1 !important;
  background: transparent !important;
  opacity: 1 !important;
  overflow: visible !important;
  transform: translate3d(0,0,0) !important;
  filter: none !important;
}

.hero-video-widget.is-open .floating-video-avatar,
.floating-video-widget.hero-video-widget.is-open .floating-video-avatar {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.hero-video-widget .floating-video-player,
.floating-video-widget.hero-video-widget .floating-video-player {
  position: absolute !important;
  right: 0 !important;
  bottom: calc(100% + var(--avatar-video-gap)) !important;
  width: var(--avatar-video-width) !important;
  height: auto !important;
  aspect-ratio: 9 / 16 !important;
  max-height: calc(100vh - var(--avatar-widget-size) - var(--avatar-widget-edge) - var(--avatar-video-gap) - 24px) !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 26px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  background: #000 !important;
  filter: none !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.62), 0 0 0 1px rgba(114,218,255,.22) !important;
  transform: translate3d(0,18px,0) scale(.92) !important;
  transition: opacity .28s ease, transform .45s cubic-bezier(.22,1.25,.36,1), visibility .28s ease !important;
}

.hero-video-widget.is-open .floating-video-player,
.floating-video-widget.hero-video-widget.is-open .floating-video-player {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate3d(0,0,0) scale(1) !important;
}

.hero-video-widget .floating-video-caption,
.floating-video-widget.hero-video-widget .floating-video-caption {
  position: absolute !important;
  right: 12px !important;
  bottom: calc(100% + var(--avatar-video-gap) + 16px) !important;
  width: calc(var(--avatar-video-width) - 24px) !important;
  display: block !important;
  padding: 12px 14px !important;
  border-radius: 0 0 22px 22px !important;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.62)) !important;
  color: #fff !important;
  text-align: center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 2 !important;
  transform: translate3d(0,12px,0) !important;
  transition: opacity .28s ease, transform .45s cubic-bezier(.22,1.25,.36,1), visibility .28s ease !important;
}

.hero-video-widget.is-open .floating-video-caption,
.floating-video-widget.hero-video-widget.is-open .floating-video-caption {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate3d(0,0,0) !important;
}

.hero-video-widget .floating-video-caption strong,
.floating-video-widget.hero-video-widget .floating-video-caption strong {
  display: block !important;
  font-size: 16px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
}

.hero-video-widget .floating-video-caption small,
.floating-video-widget.hero-video-widget .floating-video-caption small {
  display: block !important;
  margin-top: 3px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: rgba(224,248,255,.88) !important;
}

.hero-video-widget .floating-video-close,
.floating-video-widget.hero-video-widget .floating-video-close {
  position: absolute !important;
  right: 10px !important;
  bottom: calc(100% + var(--avatar-video-gap) + min((var(--avatar-video-width) * 16 / 9), calc(100vh - var(--avatar-widget-size) - var(--avatar-widget-edge) - var(--avatar-video-gap) - 24px)) - 44px) !important;
  width: 34px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(4, 18, 28, .78) !important;
  color: #fff !important;
  font-size: 25px !important;
  line-height: 1 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 3 !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.35) !important;
}

.hero-video-widget.is-open .floating-video-close,
.floating-video-widget.hero-video-widget.is-open .floating-video-close {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body.floating-video-open::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@media (max-width: 1024px) {
  :root {
    --avatar-widget-size: 138px;
    --avatar-widget-edge: 20px;
    --avatar-video-gap: 16px;
    --avatar-video-width: min(300px, calc(100vw - 40px));
  }
}

@media (max-width: 768px) {
  :root {
    --avatar-widget-size: 112px;
    --avatar-widget-edge: 16px;
    --avatar-video-gap: 14px;
    --avatar-video-width: min(250px, calc(100vw - 32px));
  }
  .hero-video-widget .floating-video-caption strong,
  .floating-video-widget.hero-video-widget .floating-video-caption strong {
    font-size: 15px !important;
  }
  .hero-video-widget .floating-video-caption small,
  .floating-video-widget.hero-video-widget .floating-video-caption small {
    font-size: 10px !important;
  }
}

/* v49: final requested video widget placement and icon ring style */
:root {
  --avatar-widget-size: 160px;
  --avatar-widget-edge: 24px;
  --avatar-video-gap: 24px;
  --avatar-video-size: min(350px, calc(100vw - 48px), calc(100vh - 230px));
  --avatar-button-color: #0099B5;
  --avatar-button-border: rgba(0, 195, 215, 0.9);
}

.hero-video-widget,
.floating-video-widget.hero-video-widget {
  position: fixed !important;
  right: var(--avatar-widget-edge) !important;
  bottom: var(--avatar-widget-edge) !important;
  left: auto !important;
  top: auto !important;
  width: var(--avatar-widget-size) !important;
  height: var(--avatar-widget-size) !important;
  z-index: 100000 !important;
  overflow: visible !important;
}

.hero-video-widget .floating-video-avatar,
.floating-video-widget.hero-video-widget .floating-video-avatar {
  border-radius: 50% !important;
  box-shadow:
    0 16px 42px rgba(0,0,0,.42),
    0 0 0 2.5px var(--avatar-button-border),
    0 0 22px rgba(0, 195, 215, .34) !important;
}

.hero-video-widget .floating-video-player,
.floating-video-widget.hero-video-widget .floating-video-player {
  position: absolute !important;
  right: 0 !important;
  bottom: calc(100% + var(--avatar-video-gap)) !important;
  width: var(--avatar-video-size) !important;
  height: var(--avatar-video-size) !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 28px !important;
  background: transparent !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  filter: none !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.62), 0 0 0 1px rgba(0,195,215,.32) !important;
  transform: translate3d(0,18px,0) scale(.94) !important;
  transition: opacity .28s ease, transform .45s cubic-bezier(.22,1.25,.36,1), visibility .28s ease !important;
}

.hero-video-widget.is-open .floating-video-player,
.floating-video-widget.hero-video-widget.is-open .floating-video-player {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate3d(0,0,0) scale(1) !important;
}

.hero-video-widget .floating-video-caption,
.floating-video-widget.hero-video-widget .floating-video-caption {
  right: 0 !important;
  bottom: calc(100% + var(--avatar-video-gap) + 12px) !important;
  width: var(--avatar-video-size) !important;
  max-width: var(--avatar-video-size) !important;
  padding: 10px 14px 14px !important;
  border-radius: 0 0 28px 28px !important;
}

.hero-video-widget .floating-video-close,
.floating-video-widget.hero-video-widget .floating-video-close {
  right: 12px !important;
  bottom: calc(100% + var(--avatar-video-gap) + var(--avatar-video-size) - 46px) !important;
}

@media (max-width: 1024px) {
  :root {
    --avatar-widget-size: 138px;
    --avatar-widget-edge: 20px;
    --avatar-video-gap: 20px;
    --avatar-video-size: min(320px, calc(100vw - 40px), calc(100vh - 200px));
  }
}

@media (max-width: 768px) {
  :root {
    --avatar-widget-size: 112px;
    --avatar-widget-edge: 16px;
    --avatar-video-gap: 16px;
    --avatar-video-size: min(260px, calc(100vw - 32px), calc(100vh - 170px));
  }
}

/* v50: place opened intro video strictly above the bottom-right icon (no overlap) */
:root {
  --avatar-widget-size: 160px;
  --avatar-widget-edge: 24px;
  --avatar-video-gap: 34px;
  --avatar-video-size: min(350px, calc(100vw - 48px), calc(100vh - 260px));
  --avatar-button-border: rgba(0, 195, 215, 0.95);
}

.hero-video-widget,
.floating-video-widget.hero-video-widget {
  position: fixed !important;
  right: var(--avatar-widget-edge) !important;
  bottom: var(--avatar-widget-edge) !important;
  width: var(--avatar-widget-size) !important;
  height: var(--avatar-widget-size) !important;
  overflow: visible !important;
  z-index: 100000 !important;
}

.hero-video-widget .floating-video-avatar,
.floating-video-widget.hero-video-widget .floating-video-avatar {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  border: 2px solid var(--avatar-button-border) !important;
  box-shadow: 0 16px 42px rgba(0,0,0,.42), 0 0 18px rgba(0,195,215,.30) !important;
}

.hero-video-widget .floating-video-player,
.floating-video-widget.hero-video-widget .floating-video-player {
  position: absolute !important;
  right: 0 !important;
  bottom: calc(var(--avatar-widget-size) + var(--avatar-video-gap)) !important;
  width: var(--avatar-video-size) !important;
  height: var(--avatar-video-size) !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 22px !important;
  background: transparent !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  filter: none !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.62), 0 0 0 1px rgba(0,195,215,.38) !important;
  transform: translate3d(0,14px,0) scale(.96) !important;
  transition: opacity .28s ease, transform .45s cubic-bezier(.22,1.25,.36,1), visibility .28s ease !important;
}

.hero-video-widget.is-open .floating-video-player,
.floating-video-widget.hero-video-widget.is-open .floating-video-player {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate3d(0,0,0) scale(1) !important;
}

.hero-video-widget .floating-video-caption,
.floating-video-widget.hero-video-widget .floating-video-caption {
  position: absolute !important;
  right: 0 !important;
  bottom: calc(var(--avatar-widget-size) + var(--avatar-video-gap)) !important;
  width: var(--avatar-video-size) !important;
  max-width: var(--avatar-video-size) !important;
  padding: 10px 14px 14px !important;
  border-radius: 0 0 22px 22px !important;
  background: linear-gradient(to top, rgba(0,10,18,.78), rgba(0,10,18,0)) !important;
  transform: translate3d(0,0,0) !important;
}

.hero-video-widget .floating-video-close,
.floating-video-widget.hero-video-widget .floating-video-close {
  position: absolute !important;
  right: 12px !important;
  bottom: calc(var(--avatar-widget-size) + var(--avatar-video-gap) + var(--avatar-video-size) - 46px) !important;
}

@media (max-width: 1024px) {
  :root {
    --avatar-widget-size: 138px;
    --avatar-widget-edge: 20px;
    --avatar-video-gap: 28px;
    --avatar-video-size: min(320px, calc(100vw - 40px), calc(100vh - 230px));
  }
}

@media (max-width: 768px) {
  :root {
    --avatar-widget-size: 112px;
    --avatar-widget-edge: 16px;
    --avatar-video-gap: 22px;
    --avatar-video-size: min(260px, calc(100vw - 32px), calc(100vh - 185px));
  }
}

/* v51: 640x640 elastic video opening directly above avatar icon */
:root {
  --avatar-widget-size: 160px;
  --avatar-widget-edge: 24px;
  --avatar-video-gap: 28px;
  --avatar-video-size: min(640px, calc(100vw - 48px), calc(100vh - var(--avatar-widget-size) - var(--avatar-widget-edge) - var(--avatar-video-gap) - 24px));
  --avatar-button-border: rgba(0, 195, 215, 0.95);
}

.hero-video-widget,
.floating-video-widget.hero-video-widget {
  position: fixed !important;
  right: var(--avatar-widget-edge) !important;
  bottom: var(--avatar-widget-edge) !important;
  left: auto !important;
  top: auto !important;
  width: var(--avatar-widget-size) !important;
  height: var(--avatar-widget-size) !important;
  overflow: visible !important;
  z-index: 100000 !important;
}

.hero-video-widget .floating-video-player,
.floating-video-widget.hero-video-widget .floating-video-player {
  position: absolute !important;
  right: 0 !important;
  bottom: calc(var(--avatar-widget-size) + var(--avatar-video-gap)) !important;
  width: var(--avatar-video-size) !important;
  height: var(--avatar-video-size) !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 26px !important;
  background: #00131b !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  filter: none !important;
  box-shadow: 0 26px 80px rgba(0,0,0,.66), 0 0 0 1px rgba(0,195,215,.42) !important;
  transform-origin: bottom right !important;
  transform: translate3d(0, 26px, 0) scale(.54) !important;
  transition:
    opacity .26s ease,
    visibility .26s ease,
    transform .72s cubic-bezier(.18, 1.55, .28, 1) !important;
}

.hero-video-widget.is-open .floating-video-player,
.floating-video-widget.hero-video-widget.is-open .floating-video-player {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

.hero-video-widget .floating-video-caption,
.floating-video-widget.hero-video-widget .floating-video-caption {
  position: absolute !important;
  right: 0 !important;
  bottom: calc(var(--avatar-widget-size) + var(--avatar-video-gap)) !important;
  width: var(--avatar-video-size) !important;
  max-width: var(--avatar-video-size) !important;
  padding: 14px 18px 18px !important;
  border-radius: 0 0 26px 26px !important;
  background: linear-gradient(to top, rgba(0,10,18,.78), rgba(0,10,18,0)) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform-origin: bottom right !important;
  transform: translate3d(0, 26px, 0) scale(.54) !important;
  transition:
    opacity .24s ease .16s,
    visibility .24s ease .16s,
    transform .72s cubic-bezier(.18, 1.55, .28, 1) !important;
}

.hero-video-widget.is-open .floating-video-caption,
.floating-video-widget.hero-video-widget.is-open .floating-video-caption {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

.hero-video-widget .floating-video-close,
.floating-video-widget.hero-video-widget .floating-video-close {
  position: absolute !important;
  right: 14px !important;
  bottom: calc(var(--avatar-widget-size) + var(--avatar-video-gap) + var(--avatar-video-size) - 50px) !important;
}

@media (max-width: 1024px) {
  :root {
    --avatar-widget-size: 138px;
    --avatar-widget-edge: 20px;
    --avatar-video-gap: 24px;
    --avatar-video-size: min(520px, calc(100vw - 40px), calc(100vh - var(--avatar-widget-size) - var(--avatar-widget-edge) - var(--avatar-video-gap) - 24px));
  }
}

@media (max-width: 768px) {
  :root {
    --avatar-widget-size: 112px;
    --avatar-widget-edge: 16px;
    --avatar-video-gap: 18px;
    --avatar-video-size: min(340px, calc(100vw - 32px), calc(100vh - var(--avatar-widget-size) - var(--avatar-widget-edge) - var(--avatar-video-gap) - 20px));
  }
}

/* v52: Hero-card video concept — avatar in top-left of the hero box; video expands inside the hero box */
.hero-copy.glass {
  position: relative !important;
  overflow: visible !important;
}

.hero-copy.glass .hero-card-video-widget,
.hero-copy.glass .floating-video-widget.hero-video-widget.hero-card-video-widget {
  --hero-card-avatar-size: 160px;
  position: absolute !important;
  left: 62px !important;
  top: -72px !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--hero-card-avatar-size) !important;
  height: var(--hero-card-avatar-size) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  overflow: visible !important;
  cursor: pointer !important;
  z-index: 30 !important;
  transform: translate3d(0,0,0) scale(1) !important;
  transform-origin: 50% 50% !important;
  transition: transform .45s cubic-bezier(.22,1.28,.36,1), opacity .25s ease !important;
}

.hero-copy.glass .hero-card-video-widget:hover:not(.is-open) {
  transform: translate3d(0,-3px,0) scale(1.035) !important;
}

.hero-copy.glass .hero-card-video-widget .floating-video-avatar {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
  border: 2px solid #21aebd !important;
  box-shadow: 0 16px 42px rgba(0,0,0,.34), 0 0 24px rgba(33,174,189,.35) !important;
  transition: opacity .2s ease, transform .45s cubic-bezier(.22,1.28,.36,1) !important;
}

.hero-copy.glass .hero-card-video-widget .floating-video-play {
  position: absolute !important;
  left: 4px !important;
  bottom: 2px !important;
  width: 54px !important;
  height: 54px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: #1b8fa1 !important;
  color: #fff !important;
  font-size: 22px !important;
  line-height: 1 !important;
  padding-left: 4px !important;
  border: 4px solid rgba(229,250,255,.92) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 0 18px rgba(33,174,189,.35) !important;
  z-index: 3 !important;
  transition: transform .3s ease, opacity .2s ease !important;
}

.hero-copy.glass .hero-card-video-widget .floating-video-player {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 18px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  background: #000 !important;
  filter: none !important;
  box-shadow: none !important;
  transform: scale(.72) translate3d(0,0,0) !important;
  transform-origin: 13% 13% !important;
  transition: opacity .24s ease, visibility .24s ease, transform .56s cubic-bezier(.2,1.35,.3,1) !important;
  z-index: 4 !important;
}

.hero-copy.glass .hero-card-video-widget .floating-video-close {
  position: absolute !important;
  right: 22px !important;
  top: 22px !important;
  bottom: auto !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(4,18,28,.76) !important;
  color: #fff !important;
  font-size: 26px !important;
  line-height: 1 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 7 !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.35) !important;
}

.hero-copy.glass .hero-card-video-widget.is-open,
.hero-copy.glass .floating-video-widget.hero-video-widget.hero-card-video-widget.is-open {
  left: 34px !important;
  top: 34px !important;
  right: auto !important;
  bottom: auto !important;
  width: calc(100% - 68px) !important;
  height: calc(100% - 68px) !important;
  border-radius: 20px !important;
  overflow: visible !important;
  z-index: 80 !important;
  transform: translate3d(0,0,0) scale(1) !important;
}

.hero-copy.glass .hero-card-video-widget.is-open .floating-video-avatar,
.hero-copy.glass .hero-card-video-widget.is-open .floating-video-play {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: scale(.86) !important;
}

.hero-copy.glass .hero-card-video-widget.is-open .floating-video-player {
  width: 100% !important;
  height: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: scale(1) translate3d(0,0,0) !important;
  border-radius: 18px !important;
}

.hero-copy.glass .hero-card-video-widget.is-open .floating-video-close {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.hero-copy.glass .hero-card-video-widget.is-open ~ h1,
.hero-copy.glass .hero-card-video-widget.is-open ~ p,
.hero-copy.glass .hero-card-video-widget.is-open ~ .btn,
.hero-copy.glass .hero-card-video-widget.is-open ~ .hero-cta-row {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .18s ease, visibility .18s ease !important;
}

.hero-copy.glass .hero-card-video-widget .floating-video-caption,
.hero-copy.glass .hero-card-video-widget.is-open .floating-video-caption {
  display: none !important;
}

@media (max-width: 1024px) {
  .hero-copy.glass .hero-card-video-widget,
  .hero-copy.glass .floating-video-widget.hero-video-widget.hero-card-video-widget {
    --hero-card-avatar-size: 132px;
    left: 42px !important;
    top: -60px !important;
  }
  .hero-copy.glass .hero-card-video-widget.is-open,
  .hero-copy.glass .floating-video-widget.hero-video-widget.hero-card-video-widget.is-open {
    left: 24px !important;
    top: 24px !important;
    width: calc(100% - 48px) !important;
    height: calc(100% - 48px) !important;
  }
}

@media (max-width: 640px) {
  .hero-copy.glass {
    padding-top: 82px !important;
  }
  .hero-copy.glass .hero-card-video-widget,
  .hero-copy.glass .floating-video-widget.hero-video-widget.hero-card-video-widget {
    --hero-card-avatar-size: 108px;
    left: 26px !important;
    top: -42px !important;
  }
  .hero-copy.glass .hero-card-video-widget .floating-video-play {
    width: 42px !important;
    height: 42px !important;
    font-size: 18px !important;
    border-width: 3px !important;
  }
  .hero-copy.glass .hero-card-video-widget.is-open,
  .hero-copy.glass .floating-video-widget.hero-video-widget.hero-card-video-widget.is-open {
    left: 16px !important;
    top: 16px !important;
    width: calc(100% - 32px) !important;
    height: calc(100% - 32px) !important;
  }
}

/* v53: hero text below avatar + smaller headline; WhatsApp back to bottom-right */
.hero-copy.glass {
  padding-top: 128px !important;
}
.hero-copy.glass h1 {
  font-size: clamp(30px, 3.25vw, 54px) !important;
  line-height: 1.08 !important;
  margin-top: 0 !important;
}
.hero-copy.glass p {
  font-size: clamp(13px, 1.05vw, 14px) !important;
  line-height: 1.75 !important;
}
.hero-copy.glass .hero-card-video-widget,
.hero-copy.glass .floating-video-widget.hero-video-widget.hero-card-video-widget {
  left: 54px !important;
  top: -66px !important;
}
@media (max-width: 1024px) {
  .hero-copy.glass {
    padding-top: 110px !important;
  }
  .hero-copy.glass h1 {
    font-size: clamp(28px, 5vw, 46px) !important;
  }
}
@media (max-width: 640px) {
  .hero-copy.glass {
    padding-top: 92px !important;
  }
  .hero-copy.glass h1 {
    font-size: clamp(26px, 9vw, 38px) !important;
  }
  .hero-copy.glass .hero-card-video-widget,
  .hero-copy.glass .floating-video-widget.hero-video-widget.hero-card-video-widget {
    left: 24px !important;
    top: -40px !important;
  }
}


/* v55 DEPLOYMENT + HERO STABILITY PATCH
   Fixes server-side/cached layout mismatch where the hero can appear broken after upload.
   Also prevents horizontal scroll from shifting the iframe/home page on live hosting. */
html, body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}
html,
body.shell-page {
  scroll-behavior: auto !important;
}
body.shell-page {
  width: 100% !important;
  max-width: 100vw !important;
}
.site-frame {
  left: 64px !important;
  width: calc(100vw - 64px) !important;
  max-width: calc(100vw - 64px) !important;
  overflow: hidden !important;
}
body.frame-page {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}
body.frame-page .section,
body.frame-page .hero {
  max-width: 100vw !important;
  overflow-x: clip !important;
}
body.frame-page .hero {
  width: 100% !important;
  padding-left: clamp(42px, 6vw, 80px) !important;
  padding-right: clamp(24px, 4vw, 56px) !important;
}
body.frame-page .hero-copy {
  max-width: min(660px, calc(100vw - 170px)) !important;
  transform: none !important;
  left: auto !important;
  right: auto !important;
}
body.frame-page .hero-copy h1 {
  white-space: normal !important;
}
body.frame-page .hero-orb {
  max-width: min(82vw, 1230px) !important;
  right: clamp(-220px, -4vw, 1%) !important;
  pointer-events: none !important;
}
@media (max-width: 1024px) {
  .site-frame {
    left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }
  body.frame-page .hero {
    padding-left: clamp(18px, 5vw, 42px) !important;
    padding-right: clamp(18px, 5vw, 42px) !important;
  }
  body.frame-page .hero-copy {
    max-width: 100% !important;
  }
}
@media (max-width: 768px) {
  body.frame-page .hero {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  body.frame-page .hero-copy {
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* v56: Hero submarine shift + slower elastic avatar video animation */
body.frame-page .hero-orb {
  /* Move the submarine/group away from the far right edge toward the hero center */
  right: clamp(-20px, 8vw, 150px) !important;
}

.hero-copy.glass .hero-card-video-widget,
.hero-copy.glass .floating-video-widget.hero-video-widget.hero-card-video-widget {
  transition:
    left .82s cubic-bezier(.17, 1.38, .32, 1),
    top .82s cubic-bezier(.17, 1.38, .32, 1),
    width .82s cubic-bezier(.17, 1.38, .32, 1),
    height .82s cubic-bezier(.17, 1.38, .32, 1),
    border-radius .82s cubic-bezier(.17, 1.38, .32, 1),
    transform .82s cubic-bezier(.17, 1.38, .32, 1),
    opacity .32s ease !important;
}

.hero-copy.glass .hero-card-video-widget .floating-video-player {
  transform: scale(.42) translate3d(0,0,0) !important;
  transform-origin: 14% 14% !important;
  transition:
    opacity .45s ease,
    visibility .45s ease,
    transform .92s cubic-bezier(.17, 1.45, .32, 1) !important;
}

.hero-copy.glass .hero-card-video-widget.is-open .floating-video-player {
  transform: scale(1) translate3d(0,0,0) !important;
}

.hero-copy.glass .hero-card-video-widget .floating-video-avatar,
.hero-copy.glass .hero-card-video-widget .floating-video-play {
  transition:
    opacity .42s ease,
    visibility .42s ease,
    transform .82s cubic-bezier(.17, 1.38, .32, 1) !important;
}

.hero-copy.glass .hero-card-video-widget.is-open .floating-video-avatar,
.hero-copy.glass .hero-card-video-widget.is-open .floating-video-play {
  transform: scale(.55) !important;
}

@media (max-width: 1024px) {
  body.frame-page .hero-orb {
    right: clamp(-160px, -6vw, -40px) !important;
  }
}

@media (max-width: 768px) {
  body.frame-page .hero-orb {
    right: clamp(-170px, -18vw, -60px) !important;
  }
}


/* ===== V72 FINAL LAYERING + DEFAULT AMBIENT SOUND =====
   Order requested: background < submarine < fish/bubbles < hero text box/avatar/button.
*/
.bubble-layer,
.fish-canvas {
  z-index: 12 !important;
  pointer-events: none !important;
}

body.frame-page .hero.section,
.hero.section {
  z-index: auto !important;
}

body.frame-page .hero-orb,
.hero-orb {
  z-index: 5 !important;
}

body.frame-page .hero-submarine,
.hero-submarine {
  position: relative !important;
  z-index: 5 !important;
}

body.frame-page .hero-copy,
body.frame-page .hero-copy.glass,
.hero-copy,
.hero-copy.glass {
  position: relative !important;
  z-index: 30 !important;
  isolation: isolate;
}

.hero-copy .floating-video-widget,
.hero-copy .hero-video-widget,
.hero-copy .hero-card-video-widget,
.hero-copy h1,
.hero-copy p,
.hero-copy .btn {
  position: relative;
  z-index: 31;
}

/* On mobile keep the content card above animated fish/bubbles too. */
@media (max-width: 768px) {
  .bubble-layer,
  .fish-canvas {
    z-index: 12 !important;
  }
  .hero-copy,
  .hero-copy.glass {
    z-index: 30 !important;
  }
}

/* ============================================================
   v73: Restore hero background while preserving mouse glow.
   Layer order: city background < water glow canvas < submarine < fish/bubbles < hero content.
   ============================================================ */
body.frame-page #waterCanvas {
  z-index: 2 !important;
}

.hero {
  isolation: isolate !important;
  background: transparent !important;
}

.hero .hero-underwater-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: #071118 !important;
  opacity: 1 !important;
  filter: none !important;
}

.hero .hero-underwater-bg::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 34vh;
  min-height: 220px;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(1, 8, 14, 0) 0%,
    rgba(1, 8, 14, 0) 58%,
    rgba(1, 8, 14, 0.52) 82%,
    rgba(1, 5, 8, 0.98) 100%
  );
}

/* Keep the existing requested depth: background < glow < submarine < fish/bubbles < card */
body.frame-page .hero-orb,
.hero-orb {
  z-index: 5 !important;
}

body.frame-page .bubble-layer,
body.frame-page .fish-canvas,
.bubble-layer,
.fish-canvas {
  z-index: 12 !important;
}

body.frame-page .hero-copy,
body.frame-page .hero-copy.glass,
.hero-copy,
.hero-copy.glass {
  z-index: 30 !important;
}

/* Same background on the top of inner pages, fading into site background. */
body.frame-page.subpage-bg {
  position: relative;
  background: transparent;
}

body.frame-page.subpage-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: min(620px, 62vh);
  pointer-events: none;
  z-index: -1;
  background-image:
    linear-gradient(
      to bottom,
      rgba(1, 8, 14, 0.12) 0%,
      rgba(1, 8, 14, 0.18) 42%,
      rgba(1, 8, 14, 0.72) 76%,
      rgba(1, 5, 8, 1) 100%
    ),
    linear-gradient(90deg, rgba(0, 5, 10, 0.22), rgba(0, 10, 18, 0.06) 48%, rgba(0, 8, 16, 0.20)),
    url('../images/hero-underwater-city-bg.webp');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0.78;
  filter: saturate(0.96) brightness(0.86);
}

body.frame-page.subpage-bg main,
body.frame-page.subpage-bg .about-main,
body.frame-page.subpage-bg .uid-page-main,
body.frame-page.subpage-bg .portfolio-page,
body.frame-page.subpage-bg .contact-main {
  position: relative;
  z-index: 3;
}

@media (max-width: 768px) {
  .hero .hero-underwater-bg {
    background-position: center top !important;
    opacity: 0.86 !important;
    filter: saturate(0.94) brightness(0.84) !important;
  }

  .hero .hero-underwater-bg::after {
    height: 28vh;
    min-height: 170px;
  }

  body.frame-page.subpage-bg::before {
    height: 520px;
    opacity: 0.72;
    background-position: center top;
  }
}

body.frame-page .hero,
.hero {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
}
body.frame-page .hero .hero-underwater-bg,
.hero .hero-underwater-bg {
  z-index: 0 !important;
}
body.frame-page .hero-orb,
.hero-orb {
  z-index: 5 !important;
}
body.frame-page .hero-submarine,
.hero-submarine {
  position: relative !important;
  z-index: 6 !important;
}
body.frame-page .fish-canvas,
body.frame-page .bubble-layer,
.fish-canvas,
.bubble-layer {
  z-index: 12 !important;
  pointer-events: none !important;
}
body.frame-page .hero-copy,
body.frame-page .hero-copy.glass,
.hero-copy,
.hero-copy.glass {
  position: relative !important;
  z-index: 50 !important;
  isolation: isolate !important;
}
.hero-copy .floating-video-widget,
.hero-copy .hero-video-widget,
.hero-copy .hero-card-video-widget,
.hero-copy h1,
.hero-copy p,
.hero-copy .btn {
  position: relative !important;
  z-index: 51 !important;
}

/* Prevent decorative layers from ever covering text in Safari/Chrome compositing. */
.hero-copy::before,
.hero-copy::after {
  z-index: -1 !important;
}



/* ============================================================
   V75 FINAL FIX: sound default-on + correct hero layering
   Main hero box must be above everything. Fish/bubbles must be
   behind the box but over the submarine.
   ============================================================ */

/* Remove the old section stacking context that kept the fish canvas above the card. */
body.frame-page .hero.section,
body.frame-page section#home.hero.section,
.hero.section,
section#home.hero.section {
  z-index: auto !important;
  isolation: isolate !important;
}

/* Hero layer order inside the same visual stack. */
body.frame-page .hero .hero-underwater-bg,
.hero .hero-underwater-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

body.frame-page .hero-orb,
.hero-orb {
  z-index: 10 !important;
  pointer-events: none !important;
}

body.frame-page .hero-submarine,
.hero-submarine {
  z-index: 10 !important;
}

body.frame-page .orb-glow,
.orb-glow {
  z-index: 9 !important;
}

/* Decorative movement must sit above submarine but below the hero card. */
body.frame-page .fish-canvas,
body.frame-page .bubble-layer,
.fish-canvas,
.bubble-layer,
.artlantic-bubbles,
.station-vent,
.station-bubble {
  z-index: 40 !important;
  pointer-events: none !important;
}

/* The entire hero card, avatar video widget, title, paragraph and CTA are above all decorative layers. */
body.frame-page .hero-copy,
body.frame-page .hero-copy.glass,
.hero-copy,
.hero-copy.glass {
  position: relative !important;
  z-index: 100 !important;
  isolation: isolate !important;
}

body.frame-page .hero-copy > *,
.hero-copy > *,
.hero-copy .floating-video-widget,
.hero-copy .hero-video-widget,
.hero-copy .hero-card-video-widget,
.hero-copy h1,
.hero-copy p,
.hero-copy .btn {
  position: relative !important;
  z-index: 110 !important;
}

/* Keep the glass surface behind the content, never above the text. */
.hero-copy.glass::before,
.hero-copy.glass::after,
.hero-copy::before,
.hero-copy::after {
  z-index: -1 !important;
  pointer-events: none !important;
}

/* ============================================================
   V76 FINAL: hero card absolute top layer + centered video close
   - Hero card/avatar/title/paragraph/CTA must always render above fish/bubbles.
   - Fish and bubbles remain over the submarine but behind the hero card.
   - Video close icon is centered with CSS-drawn X.
   ============================================================ */
body.frame-page .hero,
body.frame-page #home.hero,
body.frame-page section#home.hero.section,
.hero,
#home.hero,
section#home.hero.section {
  position: relative !important;
  isolation: isolate !important;
  z-index: 100 !important;
}

body.frame-page .hero .hero-underwater-bg,
.hero .hero-underwater-bg {
  z-index: 0 !important;
}

body.frame-page .hero-orb,
.hero-orb {
  position: absolute !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

body.frame-page .hero-submarine,
.hero-submarine {
  position: relative !important;
  z-index: 10 !important;
}

/* Decorative global layers: above submarine, below hero box */
body.frame-page .fish-canvas,
body.frame-page .bubble-layer,
.fish-canvas,
.bubble-layer,
.artlantic-bubbles,
.station-vent,
.station-bubble {
  z-index: 60 !important;
  pointer-events: none !important;
}

/* Main box must beat all decorative layers, including fixed canvases */
body.frame-page .hero-copy,
body.frame-page .hero-copy.glass,
body.frame-page section#home .hero-copy,
body.frame-page section#home .hero-copy.glass,
.hero-copy,
.hero-copy.glass,
section#home .hero-copy,
section#home .hero-copy.glass {
  position: relative !important;
  z-index: 9999 !important;
  isolation: isolate !important;
  transform: translateZ(0) !important;
}

body.frame-page .hero-copy > *,
.hero-copy > *,
.hero-copy .floating-video-widget,
.hero-copy .hero-video-widget,
.hero-copy .hero-card-video-widget,
.hero-copy h1,
.hero-copy p,
.hero-copy .btn {
  position: relative !important;
  z-index: 10000 !important;
}

.hero-copy.glass::before,
.hero-copy.glass::after,
.hero-copy::before,
.hero-copy::after {
  z-index: -1 !important;
  pointer-events: none !important;
}

/* Center the close X perfectly in its circular button */
.hero-copy.glass .hero-card-video-widget .floating-video-close,
.floating-video-widget .floating-video-close,
.floating-video-close {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 0 !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

.hero-copy.glass .hero-card-video-widget .floating-video-close::before,
.floating-video-widget .floating-video-close::before,
.floating-video-close::before {
  content: "×" !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  line-height: 32px !important;
  font-size: 32px !important;
  font-weight: 500 !important;
  text-align: center !important;
  transform: translateY(-1px) !important;
}

@media (max-width: 768px) {
  body.frame-page .fish-canvas,
  body.frame-page .bubble-layer,
  .fish-canvas,
  .bubble-layer {
    z-index: 60 !important;
  }
  body.frame-page .hero-copy,
  body.frame-page .hero-copy.glass,
  .hero-copy,
  .hero-copy.glass {
    z-index: 9999 !important;
  }
  .hero-copy.glass .hero-card-video-widget .floating-video-close::before,
  .floating-video-widget .floating-video-close::before,
  .floating-video-close::before {
    line-height: 30px !important;
    font-size: 30px !important;
  }
}

/* ============================================================
   V77 FINAL LAYER ORDER FIX
   Required order: background image < submarine < fish/bubbles < hero box.
   Important: the hero section must NOT create one giant stacking context,
   otherwise the fixed fish/bubble layers cannot sit between the submarine
   and the text card.
   ============================================================ */
body.frame-page .hero,
body.frame-page #home.hero,
body.frame-page section#home.hero.section,
.hero,
#home.hero,
section#home.hero.section {
  position: relative !important;
  isolation: auto !important;
  z-index: auto !important;
  overflow: hidden !important;
}

/* Background stays lowest inside hero. */
body.frame-page .hero .hero-underwater-bg,
.hero .hero-underwater-bg,
.hero-underwater-bg,
.hero-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Submarine sits above background, but below fish/bubbles. */
body.frame-page .hero-orb,
.hero-orb {
  position: absolute !important;
  z-index: 20 !important;
  pointer-events: none !important;
}

body.frame-page .hero-submarine,
.hero-submarine {
  position: relative !important;
  z-index: 21 !important;
  pointer-events: none !important;
}

/* Fish and bubbles must pass over the submarine, but never over the hero card. */
body.frame-page .fish-canvas,
body.frame-page .bubble-layer,
.fish-canvas,
.bubble-layer,
.artlantic-bubbles,
.station-vent,
.station-bubble {
  z-index: 60 !important;
  pointer-events: none !important;
}

/* Main hero card is the top visual layer. */
body.frame-page .hero-copy,
body.frame-page .hero-copy.glass,
body.frame-page section#home .hero-copy,
body.frame-page section#home .hero-copy.glass,
.hero-copy,
.hero-copy.glass,
section#home .hero-copy,
section#home .hero-copy.glass {
  position: relative !important;
  z-index: 10000 !important;
  isolation: isolate !important;
  transform: translateZ(0) !important;
}

body.frame-page .hero-copy > *,
.hero-copy > *,
.hero-copy .floating-video-widget,
.hero-copy .hero-video-widget,
.hero-copy .hero-card-video-widget,
.hero-copy h1,
.hero-copy p,
.hero-copy .btn {
  position: relative !important;
  z-index: 10001 !important;
}

.hero-copy.glass::before,
.hero-copy.glass::after,
.hero-copy::before,
.hero-copy::after {
  z-index: -1 !important;
  pointer-events: none !important;
}

/* Close button X: centered exactly in the round button. */
.hero-copy.glass .hero-card-video-widget .floating-video-close,
.floating-video-widget .floating-video-close,
.floating-video-close {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  font-size: 0 !important;
}

.hero-copy.glass .hero-card-video-widget .floating-video-close::before,
.floating-video-widget .floating-video-close::before,
.floating-video-close::before {
  content: "×" !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  line-height: 1 !important;
  font-size: 30px !important;
  font-weight: 500 !important;
  transform: translateY(-1px) !important;
}

/* Mobile keeps the same visual depth order. */
@media (max-width: 768px) {
  body.frame-page .hero,
  body.frame-page #home.hero,
  body.frame-page section#home.hero.section,
  .hero,
  #home.hero,
  section#home.hero.section {
    isolation: auto !important;
    z-index: auto !important;
  }

  body.frame-page .hero-copy,
  body.frame-page .hero-copy.glass,
  .hero-copy,
  .hero-copy.glass {
    z-index: 10000 !important;
  }

  body.frame-page .fish-canvas,
  body.frame-page .bubble-layer,
  .fish-canvas,
  .bubble-layer {
    z-index: 60 !important;
  }
}

/* ===== V78 FINAL DECORATIVE LAYER FIX =====
   Global rule: fish and bubbles are decorative, always behind real content.
   Hero exception: they remain above submarine/background but below hero box.
*/
.hero,
.section,
.page-hero,
.about-hero,
main,
.main-content,
.page-content,
.content-wrap,
.portfolio-section,
.services-section,
.experience-section,
.footer,
.site-footer {
  position: relative;
}

/* background/submarine base */
.hero-bg,
.site-bg {
  z-index: 0 !important;
}

.hero-orb,
.hero-submarine,
.submarine {
  z-index: 2 !important;
}

/* fish + bubbles above submarine, but still decorative */
.fish-canvas,
.bubble-layer,
.artlantic-bubbles,
.station-vent,
.station-bubble {
  z-index: 4 !important;
  pointer-events: none !important;
}

/* all real content must stay above decorative fish/bubbles */
.hero-copy,
.hero-content,
.hero-card,
.section,
.section .glass,
.page-hero,
.about-hero,
.about-content,
.content-wrap,
.page-content,
.portfolio-section,
.portfolio-grid,
.portfolio-masonry,
.service-grid,
.experience-grid,
.footer,
.site-footer {
  position: relative;
  z-index: 20 !important;
}

/* overlays/widgets remain above everything */
.topbar,
.menu-toggle,
.fullscreen-menu,
.lb-overlay,
.video-overlay,
.avatar-video-shell,
.whatsapp-float {
  z-index: 1000;
}

/* Hero box must be the highest element inside hero, above fish and bubbles */
.hero .hero-copy {
  z-index: 30 !important;
  isolation: isolate;
}

/* Keep decorative layers visible but never interactive */
.fish-canvas canvas,
.bubble-layer *,
.artlantic-bubbles * {
  pointer-events: none !important;
}


/* ===== V79 FINAL: DECORATIVE FISH/BUBBLE LAYERING LOCK =====
   Goal:
   1) Hero only: fish + bubbles are ABOVE the submarine/background, but BELOW the hero card.
   2) Everywhere else: fish + bubbles are BEHIND all real content/cards/text.
   This block intentionally overrides all older V72-V78 stacking experiments.
*/

/* Reset main app so hero children can stack against the fixed fish canvas. */
body.frame-page.home-page main#app {
  position: relative !important;
  z-index: auto !important;
  isolation: auto !important;
  transform: none !important;
}

/* Keep the HOME hero from creating a stacking context that would trap the card under the fish. */
body.frame-page.home-page section#home.hero,
body.frame-page.home-page #home.hero,
body.frame-page.home-page .hero.section {
  position: relative !important;
  z-index: auto !important;
  isolation: auto !important;
}

/* Global decorative layers: visible above background/submarine, but low enough for content to cover them. */
body.frame-page .fish-canvas,
body.frame-page .bubble-layer,
body.frame-page .artlantic-bubbles {
  position: fixed !important;
  inset: 0 !important;
  z-index: 5 !important;
  pointer-events: none !important;
}

/* Home hero submarine/background sit behind fish. */
body.frame-page.home-page .hero-underwater-bg,
body.frame-page.home-page .hero-bg,
body.frame-page.home-page .site-bg {
  z-index: 0 !important;
}

body.frame-page.home-page .hero-submarine,
body.frame-page.home-page .submarine,
body.frame-page.home-page .hero-orb {
  position: absolute !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* Hero card/avatar/title/paragraph/CTA is the top hero layer. */
body.frame-page.home-page .hero-copy,
body.frame-page.home-page .hero-copy.glass,
body.frame-page.home-page section#home .hero-copy,
body.frame-page.home-page section#home .hero-copy.glass {
  position: relative !important;
  z-index: 10000 !important;
  isolation: isolate !important;
  transform: translateZ(0) !important;
}
body.frame-page.home-page .hero-copy > *,
body.frame-page.home-page .hero-copy .floating-video-widget,
body.frame-page.home-page .hero-copy h1,
body.frame-page.home-page .hero-copy p,
body.frame-page.home-page .hero-copy .btn {
  position: relative !important;
  z-index: 10001 !important;
}
body.frame-page.home-page .hero-copy::before,
body.frame-page.home-page .hero-copy::after,
body.frame-page.home-page .hero-copy.glass::before,
body.frame-page.home-page .hero-copy.glass::after {
  z-index: -1 !important;
  pointer-events: none !important;
}

/* Everything BELOW the home hero must cover fish and bubbles. */
body.frame-page.home-page main#app > section:not(#home),
body.frame-page.home-page main#app > footer,
body.frame-page.home-page .section:not(.hero),
body.frame-page.home-page .services-section,
body.frame-page.home-page .experience-section,
body.frame-page.home-page .portfolio-section,
body.frame-page.home-page .clients-section,
body.frame-page.home-page .footer,
body.frame-page.home-page .site-footer,
body.frame-page.home-page .glass,
body.frame-page.home-page .card,
body.frame-page.home-page .service-card,
body.frame-page.home-page .experience-card,
body.frame-page.home-page .portfolio-card {
  position: relative !important;
  z-index: 50 !important;
}

/* Internal pages: all content must be above fish/bubbles. */
body.frame-page:not(.home-page) main,
body.frame-page:not(.home-page) .uid-hero,
body.frame-page:not(.home-page) .uid-gallery,
body.frame-page:not(.home-page) .uid-admin-bar,
body.frame-page:not(.home-page) .uid-save-toast,
body.frame-page:not(.home-page) .uid-add-modal,
body.frame-page:not(.home-page) .uid-lightbox,
body.frame-page:not(.home-page) .about-main,
body.frame-page:not(.home-page) .about-hero,
body.frame-page:not(.home-page) .about-intro,
body.frame-page:not(.home-page) .about-grid,
body.frame-page:not(.home-page) .about-card,
body.frame-page:not(.home-page) .page-hero,
body.frame-page:not(.home-page) .content-wrap,
body.frame-page:not(.home-page) .page-content,
body.frame-page:not(.home-page) .portfolio-section,
body.frame-page:not(.home-page) .portfolio-grid,
body.frame-page:not(.home-page) .portfolio-masonry,
body.frame-page:not(.home-page) .footer,
body.frame-page:not(.home-page) .site-footer,
body.frame-page:not(.home-page) .contact-section,
body.frame-page:not(.home-page) .contact-card,
body.frame-page:not(.home-page) .webdev-grid,
body.frame-page:not(.home-page) .webdev-card {
  position: relative !important;
  z-index: 50 !important;
}

/* Internal decorative submarine remains behind fish and all page content. */
body.frame-page:not(.home-page) .uid-page-sub-wrap,
body.frame-page:not(.home-page) .uid-page-sub {
  z-index: 2 !important;
  pointer-events: none !important;
}

/* Top UI, fullscreen menu, lightboxes and WhatsApp always remain above decorative layers. */
body.frame-page .topbar,
body.frame-page .menu-toggle,
body.frame-page .fullscreen-menu,
body.frame-page .lb-overlay,
body.frame-page .video-overlay,
body.frame-page .whatsapp-float,
body.frame-page .radio-player,
body.frame-page .audio-shell {
  position: fixed;
  z-index: 20000 !important;
}

/* Center close X in the round video close button. */
body.frame-page .floating-video-close,
body.frame-page .hero-card-video-widget .floating-video-close {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  font-size: 0 !important;
}
body.frame-page .floating-video-close::before,
body.frame-page .hero-card-video-widget .floating-video-close::before {
  content: "×" !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  line-height: 1 !important;
  font-size: 30px !important;
  font-weight: 500 !important;
  transform: translateY(-1px) !important;
}

/* Keep decorative layers non-interactive at all times. */
body.frame-page .fish-canvas *,
body.frame-page .bubble-layer *,
body.frame-page .artlantic-bubbles * {
  pointer-events: none !important;
}

/* ===== V80: PORTFOLIO LIGHTBOX RESTORE =====
   V79 moved internal page content above decorative fish/bubbles but accidentally
   overrode .uid-lightbox from fixed/fullscreen to relative/low z-index.
   This restores all portfolio image/video lightboxes and add modals above every layer.
*/
body.frame-page .uid-lightbox,
body.frame-page.subpage-bg .uid-lightbox,
body.frame-page:not(.home-page) .uid-lightbox {
  position: fixed !important;
  inset: 0 !important;
  z-index: 300000 !important;
  pointer-events: none;
}
body.frame-page .uid-lightbox.is-open,
body.frame-page.subpage-bg .uid-lightbox.is-open,
body.frame-page:not(.home-page) .uid-lightbox.is-open {
  opacity: 1 !important;
  pointer-events: auto !important;
}
body.frame-page .uid-lightbox *,
body.frame-page.subpage-bg .uid-lightbox *,
body.frame-page:not(.home-page) .uid-lightbox * {
  pointer-events: auto;
}
body.frame-page .uid-lb-close,
body.frame-page .uid-lb-prev,
body.frame-page .uid-lb-next {
  position: fixed !important;
  z-index: 300001 !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: center !important;
}
body.frame-page .uid-lb-close {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
}
body.frame-page .uid-lb-prev,
body.frame-page .uid-lb-next {
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
}
body.frame-page .uid-lb-close svg,
body.frame-page .uid-lb-prev svg,
body.frame-page .uid-lb-next svg {
  display: block !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  transform: none !important;
}
body.frame-page .uid-lb-img-wrap,
body.frame-page .uid-lb-video-wrap,
body.frame-page #uidLbImg,
body.frame-page #uidLbVideo {
  position: relative !important;
  z-index: 300001 !important;
}
body.frame-page .uid-add-modal,
body.frame-page.subpage-bg .uid-add-modal,
body.frame-page:not(.home-page) .uid-add-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 300010 !important;
}
/* keep fish/bubbles decorative only; they must never catch portfolio clicks */
body.frame-page .fish-canvas,
body.frame-page .bubble-layer,
body.frame-page .artlantic-bubbles,
body.frame-page .fish-canvas *,
body.frame-page .bubble-layer *,
body.frame-page .artlantic-bubbles * {
  pointer-events: none !important;
}


/* ===== V81: SUBMARINE POSITION RESTORE =====
   Keep the V80 lightbox fixes, but restore the home hero submarine to the
   stable pre-lightbox position and prevent later layering rules from pushing it down.
*/
body.frame-page.home-page .hero-submarine {
  position: absolute !important;
  width: clamp(620px, 52vw, 1040px) !important;
  max-width: 1040px !important;
  left: auto !important;
  right: 6% !important;
  top: 42% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

@media (max-width: 1440px) and (min-width: 769px) {
  body.frame-page.home-page .hero-submarine {
    width: clamp(560px, 50vw, 860px) !important;
    right: 4% !important;
    top: 43% !important;
    transform: translateY(-50%) !important;
  }
}

@media (max-width: 768px) {
  body.frame-page.home-page .hero-submarine {
    width: 90vw !important;
    max-width: 520px !important;
    left: 50% !important;
    right: auto !important;
    top: 80px !important;
    transform: translateX(-50%) !important;
  }
}

/* ===== V82: RESTORE V66 SUBMARINE POSITION, KEEP LATEST FIXES =====
   This overrides the later V81 direct .hero-submarine positioning and restores
   the stable V66 behavior: the .hero-orb controls placement and the submarine
   image fills that orb. Lightbox/layering fixes from V80/V81 remain intact. */
body.frame-page.home-page .hero-orb,
body.frame-page .hero .hero-orb,
.hero .hero-orb {
  position: absolute !important;
  right: 1% !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
  width: min(1230px, 82vw) !important;
  max-width: none !important;
  height: auto !important;
  pointer-events: none !important;
}

body.frame-page.home-page .hero-submarine,
body.frame-page .hero .hero-submarine,
.hero .hero-submarine {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  display: block !important;
  transform: none !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* V66 laptop visibility: keep most of the submarine visible on laptop screens. */
@media (min-width: 1025px) and (max-width: 1600px) {
  body.frame-page.home-page .hero-orb,
  body.frame-page .hero .hero-orb,
  .hero .hero-orb {
    width: min(760px, 56vw) !important;
    max-width: 760px !important;
    right: 3.5% !important;
    top: 47% !important;
    transform: translateY(-50%) !important;
  }
}

@media (min-width: 1025px) and (max-width: 1366px) {
  body.frame-page.home-page .hero-orb,
  body.frame-page .hero .hero-orb,
  .hero .hero-orb {
    width: min(700px, 54vw) !important;
    max-width: 700px !important;
    right: 2.5% !important;
    top: 47% !important;
  }
}

/* V66-style tablet layout: submarine above content, not absolutely pushed down. */
@media (max-width: 1024px) and (min-width: 769px) {
  body.frame-page.home-page .hero-orb,
  body.frame-page .hero .hero-orb,
  .hero .hero-orb {
    order: 1 !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: min(900px, 80vw) !important;
    max-width: none !important;
    margin: 0 auto !important;
  }
}

/* Mobile: centered submarine, reduced top gap, same as stable V66/mobile centering. */
@media (max-width: 768px) {
  body.frame-page.home-page .hero {
    padding-top: 0 !important;
  }

  body.frame-page.home-page .hero-mobile-space {
    display: none !important;
  }

  body.frame-page.home-page .hero-orb,
  body.frame-page .hero .hero-orb,
  .hero .hero-orb {
    order: 1 !important;
    position: relative !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    width: min(112vw, 620px) !important;
    max-width: none !important;
    height: auto !important;
    margin: -8px 0 -18px 0 !important;
  }

  body.frame-page.home-page .hero-submarine,
  body.frame-page .hero .hero-submarine,
  .hero .hero-submarine {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 auto !important;
    transform: none !important;
  }
}

/* ===== V84: REMOVE GLOBAL ZOOM INTERFERENCE =====
   Fix: portfolio zoom cursor/hint and hidden lightbox layers must never block clicks.
   Lightbox still opens normally, but the extra zoom-in/zoom-out mode is disabled visually.
*/
html, body, a, button, input, textarea, select, label,
.topbar, .menu-toggle, .fullscreen-menu, .radio-player, .audio-shell,
.hero, .hero-copy, .btn, .whatsapp-float {
  cursor: auto;
}
a, button, .btn, .menu-toggle, .radio-player button, .audio-shell button,
.whatsapp-float, .uid-thumb, .uid-card, .uid-vid-card, .webdev-card,
.uid-lb-close, .uid-lb-prev, .uid-lb-next, .floating-video-widget,
.floating-video-close {
  cursor: pointer !important;
}

/* Remove magnifier/zoom cursor and hint everywhere. */
#uidLbImg,
.uid-lb-img-wrap,
.uid-lb-img-wrap img,
.uid-lightbox.is-zoomed #uidLbImg {
  cursor: default !important;
}
.uid-lb-zoom-hint {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Closed lightboxes/modals/overlays must be completely inert and must not cover the page. */
.uid-lightbox:not(.is-open),
.lb-overlay:not(.is-open),
.video-overlay:not(.is-open),
.uid-add-modal:not(.is-open) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.uid-lightbox.is-open {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Decorative layers can never block menus, buttons, lightboxes or page links. */
.fish-canvas,
.fish-canvas *,
.bubble-layer,
.bubble-layer *,
.artlantic-bubbles,
.artlantic-bubbles *,
.decor-fish,
.decor-fish *,
.decor-bubbles,
.decor-bubbles * {
  pointer-events: none !important;
}


/* ==========================================================
   V88 BLOG PAGE + LAYER SAFETY
   ========================================================== */
.frame-page main, .frame-page .footer, .section, .blog-page, .blog-wrap, .blog-hero, .blog-layout, .blog-grid, .blog-card, .blog-featured, .blog-sidebar {
  position: relative;
  z-index: 6;
}
.frame-page .fish-canvas, .frame-page .bubble-layer { z-index: 0 !important; pointer-events: none !important; }
.hero .fish-canvas, .hero .bubble-layer { z-index: 3 !important; }
.hero-content, .hero-card, .hero-copy, .hero-text-box { position: relative; z-index: 20 !important; }
.uid-lightbox, .blog-lightbox { z-index: 999999 !important; }

.blog-page { padding: 110px 6% 60px; min-height: 100vh; }
.blog-hero { max-width: 1180px; margin: 0 auto 38px; text-align: center; }
.blog-kicker { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border:1px solid rgba(87,211,255,.28); border-radius:999px; color:#62dfff; background:rgba(5,25,38,.62); text-transform:uppercase; font-size:12px; font-weight:800; letter-spacing:.16em; }
.blog-hero h1 { font-size: clamp(38px, 6vw, 84px); line-height:.98; margin:22px 0 18px; color:#f4fbff; text-shadow:0 12px 45px rgba(0,0,0,.55); }
.blog-hero p { max-width: 760px; margin:0 auto; color:#b9d5e4; font-size:18px; line-height:1.7; }
.blog-layout { max-width: 1180px; margin: 0 auto 38px; display:grid; grid-template-columns: 1.25fr .85fr; gap:38px; align-items:stretch; border-top:1px solid rgba(114,220,255,.12); border-bottom:1px solid rgba(114,220,255,.12); padding:38px 0; }
.blog-featured, .blog-sidebar, .blog-card, .blog-promo { background:rgba(4,17,26,.72); border:1px solid rgba(87,211,255,.14); border-radius:22px; box-shadow:0 22px 60px rgba(0,0,0,.35); backdrop-filter: blur(12px); }
.blog-featured { padding:18px; cursor:pointer; overflow:hidden; }
.blog-featured img { width:100%; height:360px; object-fit:cover; border-radius:18px; display:block; }
.blog-meta { display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; color:#8db1c7; font-size:13px; margin:18px 0 10px; }
.blog-cat { color:#65e7ff; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.blog-featured h2 { font-size: clamp(26px, 3vw, 44px); line-height:1.05; color:#fff; margin:0 0 12px; }
.blog-featured p, .blog-card p, .blog-side-post p { color:#a9c3d4; line-height:1.6; }
.blog-sidebar { padding:18px; display:flex; flex-direction:column; gap:18px; }
.blog-side-post { display:grid; grid-template-columns:150px 1fr; gap:18px; align-items:center; padding:0 0 18px; border-bottom:1px solid rgba(114,220,255,.10); cursor:pointer; }
.blog-side-post:last-child { border-bottom:0; padding-bottom:0; }
.blog-side-post img { width:150px; height:98px; object-fit:cover; border-radius:16px; }
.blog-side-post h3 { color:#fff; font-size:18px; line-height:1.2; margin:5px 0 6px; }
.blog-grid { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:28px; }
.blog-card { padding:14px; overflow:hidden; cursor:pointer; transition:transform .28s ease, border-color .28s ease, box-shadow .28s ease; }
.blog-card:hover, .blog-featured:hover, .blog-side-post:hover { border-color:rgba(96,232,255,.38); }
.blog-card:hover { transform:translateY(-6px); box-shadow:0 32px 70px rgba(0,0,0,.45); }
.blog-card img, .blog-card video { width:100%; height:220px; object-fit:cover; border-radius:18px; display:block; background:#061426; }
.blog-card h3 { color:#fff; font-size:22px; line-height:1.18; margin:10px 0 8px; }
.blog-promo { min-height:360px; padding:28px; display:flex; flex-direction:column; justify-content:center; text-align:center; align-items:center; background:radial-gradient(circle at 50% 20%, rgba(73,211,255,.18), rgba(4,17,26,.78) 48%), rgba(4,17,26,.72); }
.blog-promo h3 { font-size:30px; color:#fff; margin:12px 0; }
.blog-admin-bar { display:none; max-width:1180px; margin:0 auto 22px; gap:12px; flex-wrap:wrap; }
.blog-admin-bar button, .blog-admin-bar input { border:1px solid rgba(96,232,255,.25); background:rgba(4,17,26,.78); color:#dff8ff; border-radius:12px; padding:10px 14px; font:inherit; }
.blog-admin-bar button { cursor:pointer; font-weight:800; }
.blog-admin-bar button:hover { border-color:rgba(96,232,255,.55); color:#65e7ff; }
body.blog-admin .blog-admin-bar { display:flex; }
body.blog-admin .blog-card, body.blog-admin .blog-featured, body.blog-admin .blog-side-post { outline:1px dashed rgba(96,232,255,.22); }
.blog-edit-btn { display:none; position:absolute; top:18px; right:18px; z-index:5; border:0; border-radius:999px; padding:8px 12px; font-weight:800; color:#06202c; background:#65e7ff; cursor:pointer; }
body.blog-admin .blog-edit-btn { display:block; }
.blog-lightbox { position:fixed; inset:0; background:rgba(0,10,18,.86); backdrop-filter: blur(10px); display:none; align-items:center; justify-content:center; padding:36px; }
.blog-lightbox.is-open { display:flex; }
.blog-modal { width:min(940px, 94vw); max-height:88vh; overflow:auto; background:linear-gradient(180deg, rgba(8,30,44,.96), rgba(3,14,22,.98)); border:1px solid rgba(96,232,255,.22); border-radius:28px; box-shadow:0 40px 120px rgba(0,0,0,.65); padding:26px; position:relative; }
.blog-close { position:sticky; top:0; margin-left:auto; width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.22); background:rgba(12,34,48,.9); color:#fff; display:flex; align-items:center; justify-content:center; font-size:26px; line-height:1; cursor:pointer; z-index:2; }
.blog-modal-media img, .blog-modal-media video { width:100%; max-height:520px; object-fit:contain; border-radius:20px; background:#010912; display:block; }
.blog-modal h2 { color:#fff; font-size:clamp(30px, 5vw, 56px); line-height:1.05; margin:24px 0 12px; }
.blog-modal .blog-body { color:#c4dceb; font-size:18px; line-height:1.75; }
.blog-form { display:grid; gap:12px; width:100%; max-width:1180px; margin:0 auto 24px; padding:18px; background:rgba(4,17,26,.85); border:1px solid rgba(96,232,255,.2); border-radius:18px; }
.blog-form[hidden] { display:none; }
.blog-form input, .blog-form textarea, .blog-form select { width:100%; border:1px solid rgba(96,232,255,.22); background:rgba(0,8,14,.72); color:#eafcff; border-radius:12px; padding:12px; font:inherit; }
.blog-form textarea { min-height:120px; resize:vertical; }
.blog-form .row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.blog-form-actions { display:flex; gap:12px; justify-content:flex-end; }
.blog-form-actions button { border:1px solid rgba(96,232,255,.25); border-radius:999px; padding:10px 18px; font-weight:800; cursor:pointer; }
.blog-save { background:#00a6b8; color:#fff; }
.blog-cancel { background:transparent; color:#dff8ff; }
@media (max-width: 980px) { .blog-layout { grid-template-columns:1fr; } .blog-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } .blog-side-post { grid-template-columns:130px 1fr; } }
@media (max-width: 640px) { .blog-page { padding:76px 5% 42px; } .blog-grid { grid-template-columns:1fr; } .blog-featured img { height:250px; } .blog-side-post { grid-template-columns:1fr; } .blog-side-post img { width:100%; height:190px; } .blog-form .row { grid-template-columns:1fr; } .blog-modal { padding:18px; } }

/* v89 fixes: Blog routing/direct sidebar/login-friendly admin bar/images */
.blog-direct-sidebar{
  position:fixed;left:0;top:0;bottom:0;width:64px;z-index:40;
  background:linear-gradient(180deg,rgba(1,10,18,.96),rgba(2,18,28,.9));
  border-right:1px solid rgba(112,230,255,.12);
  display:flex;align-items:center;flex-direction:column;padding-top:18px;
}
.blog-direct-logo img{width:34px;height:auto;display:block;filter:drop-shadow(0 0 10px rgba(111,231,255,.35));}
.blog-direct-vertical{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;gap:8px;align-items:center;writing-mode:vertical-rl;text-orientation:mixed;font-size:10px;letter-spacing:5px;color:rgba(205,241,255,.72);}
.blog-frame:not(.in-frame) .blog-page{padding-left:calc(64px + 4vw);}
.blog-frame.in-frame .blog-direct-sidebar{display:none!important;}
.blog-frame.in-frame .blog-page{padding-left:clamp(24px,5vw,72px);}
.blog-page,.blog-layout,.blog-grid,.blog-card,.blog-featured,.blog-sidebar,.blog-side-post,.blog-promo{position:relative;z-index:5;}
.blog-lightbox{z-index:99999!important;}
.blog-featured img,.blog-side-post img,.blog-card img,.blog-card video{background:rgba(255,255,255,.04);object-fit:cover;}
.admin-bar-pages{display:flex;gap:5px;align-items:center;flex-wrap:wrap;max-width:70vw;overflow:auto;}
.admin-page-btn{white-space:nowrap;}
@media(max-width:768px){.blog-direct-sidebar{display:none}.blog-frame:not(.in-frame) .blog-page{padding-left:20px}}


/* ==========================================================
   V90 BLOG MEDIA EDITING + LAPTOP HERO POSITION FIX
   ========================================================== */
.blog-upload-row { align-items: stretch; }
.blog-upload-label {
  display:flex; flex-direction:column; gap:8px;
  border:1px dashed rgba(96,232,255,.28);
  background:rgba(0,8,14,.5); color:#dff8ff;
  border-radius:12px; padding:12px; font-weight:800;
}
.blog-upload-label input { padding:8px !important; background:rgba(255,255,255,.04) !important; }
.blog-form-note { margin:0; color:#8fb5c8; font-size:13px; line-height:1.5; }
.blog-youtube-thumb { position:relative; overflow:hidden; border-radius:18px; background:#061426; }
.blog-youtube-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.blog-play-badge {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; padding-left:4px;
  background:rgba(0,166,184,.92); color:#fff; font-weight:900;
  box-shadow:0 12px 35px rgba(0,0,0,.45), 0 0 0 4px rgba(255,255,255,.18);
}
.blog-featured .blog-youtube-thumb { height:360px; }
.blog-side-post .blog-youtube-thumb { width:150px; height:98px; }
.blog-card .blog-youtube-thumb { height:220px; }
.blog-video-embed { position:relative; width:100%; aspect-ratio:16/9; border-radius:20px; overflow:hidden; background:#010912; }
.blog-video-embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
@media (max-width:640px){ .blog-side-post .blog-youtube-thumb{width:100%;height:190px;} .blog-featured .blog-youtube-thumb{height:250px;} }

/* Lower the entire hero content group on laptop screens so the avatar no longer sits too high. */
@media (min-width: 1025px) and (max-width: 1600px) {
  body.frame-page.home-page .hero-copy.glass {
    margin-top: 0 !important;
  }
}
@media (min-width: 1025px) and (max-width: 1366px) {
  body.frame-page.home-page .hero-copy.glass {
    margin-top: 20px !important;
  }
}

/* V91 Blog sharing, categories and pagination */
.blog-categories{max-width:1180px;margin:0 auto 24px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;position:relative;z-index:6;}
.blog-categories button,.blog-pagination button{border:1px solid rgba(96,232,255,.25);background:rgba(4,17,26,.72);color:#dff8ff;border-radius:999px;padding:10px 15px;font:inherit;font-weight:800;cursor:pointer;transition:all .22s ease;}
.blog-categories button:hover,.blog-categories button.active,.blog-pagination button:hover,.blog-pagination button.active{background:#0d99aa;color:#fff;border-color:rgba(96,232,255,.7);box-shadow:0 0 22px rgba(0,190,220,.22);}
.blog-share{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px;position:relative;z-index:8;}
.blog-share a{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:#dff8ff;background:rgba(8,30,44,.82);border:1px solid rgba(96,232,255,.24);font-size:13px;font-weight:900;line-height:1;transition:transform .2s ease,border-color .2s ease,background .2s ease;}
.blog-share a:hover{transform:translateY(-2px);background:#0d99aa;border-color:rgba(96,232,255,.7);color:#fff;}
.blog-side-post .blog-share{margin-top:8px;}
.blog-side-post .blog-share a{width:28px;height:28px;font-size:11px;}
.blog-pagination{max-width:1180px;margin:32px auto 0;display:flex;justify-content:center;gap:10px;position:relative;z-index:6;}
.blog-close{display:inline-flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;padding:0!important;font-family:Arial,Helvetica,sans-serif!important;line-height:1!important;}
.blog-close::before{content:none!important;}
.blog-modal .blog-share{margin-top:28px;padding-top:20px;border-top:1px solid rgba(96,232,255,.14);}
.blog-modal .blog-share a{width:40px;height:40px;}


/* ===== v92 menu/blog polish ===== */
.blog-categories button[data-cat="All"] {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  aspect-ratio: 1 / 1;
}
.blog-categories button[data-cat="All"]::before { content: none !important; }
.blog-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 0 !important;
  line-height: 1 !important;
}
.blog-close svg,
.blog-close span { display:block; margin:auto; }
.blog-promo { display: none !important; }

/* v93 blog web search / rewrite assistant */
.blog-web-search-panel {
  margin: 0 auto 34px;
  max-width: 1180px;
  padding: 22px;
  border-radius: 28px;
  background: rgba(5, 22, 38, 0.82);
  border: 1px solid rgba(88, 226, 230, 0.22);
  box-shadow: 0 22px 60px rgba(0,0,0,.28);
  position: relative;
  z-index: 20;
}
.blog-web-search-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.blog-web-search-head h2 { margin: 0 0 6px; font-size: clamp(24px, 3vw, 38px); color: #fff; }
.blog-web-search-head p { margin: 0; max-width: 760px; color: rgba(230,245,255,.76); }
#blogWebSearchClose {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 24px;
  line-height: 1;
}
.blog-web-search-controls { display: flex; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.blog-web-search-controls select,
.blog-web-search-controls button {
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(101, 229, 229, .32);
  background: rgba(4, 31, 48, .85);
  color: #fff;
  padding: 0 18px;
}
.blog-web-search-controls button,
.blog-web-rewrite {
  background: linear-gradient(135deg, #13d1d5, #558cf8);
  border: 0;
  color: #041522;
  font-weight: 800;
  cursor: pointer;
}
.blog-web-results {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 380px);
  gap: 16px;
  overflow-x: auto;
  padding: 4px 2px 12px;
  scroll-snap-type: x proximity;
}
.blog-web-result {
  scroll-snap-align: start;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}
.blog-web-source { color: #69f0f2; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.blog-web-result h3 { margin: 8px 0 8px; color: #fff; font-size: 19px; line-height: 1.22; }
.blog-web-result p { color: rgba(235,247,255,.74); font-size: 14px; line-height: 1.55; margin: 0 0 12px; }
.blog-web-result a { color: #8eefff; font-size: 13px; }
.blog-web-rewrite { align-self: flex-start; padding: 10px 18px; border-radius: 999px; }
.blog-web-loading { color: #fff; padding: 20px; }
.blog-admin-bar #blogWebSearch { background: linear-gradient(135deg, #13d1d5, #7cf5c7); color: #041522; font-weight: 800; }
@media (max-width: 720px) {
  .blog-web-search-panel { padding: 16px; border-radius: 22px; }
  .blog-web-results { grid-auto-columns: minmax(250px, 86vw); }
}


/* ===== v95 final All category circle fix ===== */
.blog-categories button[data-cat="All"] {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  max-width: 52px !important;
  max-height: 52px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  flex: 0 0 52px !important;
}
.blog-categories button[data-cat="All"]::before,
.blog-categories button[data-cat="All"]::after {
  content: none !important;
}

/* ===== v96 real web search results, progress and load more ===== */
.blog-web-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 0 16px;
  color: rgba(234, 251, 255, .78);
}
.blog-web-progress-track {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
  overflow: hidden;
  border: 1px solid rgba(113, 236, 240, .16);
}
.blog-web-progress-track span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #10d4d8, #76f6c6, #74a8ff);
  box-shadow: 0 0 16px rgba(72, 238, 226, .45);
  transition: width .35s ease;
}
.blog-web-progress small { white-space: nowrap; font-size: 12px; opacity: .86; }
.blog-web-open-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(105, 240, 242, .1);
  border: 1px solid rgba(105, 240, 242, .28);
  text-decoration: none;
}
.blog-web-open-source::after { content: "↗"; font-size: 12px; opacity: .75; }
.blog-web-load-wrap { display: flex; justify-content: center; margin-top: 14px; }
#blogWebLoadMore {
  min-height: 44px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid rgba(101, 229, 229, .35);
  background: rgba(4, 31, 48, .9);
  color: #aafcff;
  font-weight: 800;
  cursor: pointer;
}
#blogWebLoadMore:hover { background: rgba(19, 209, 213, .16); color: #fff; }
.blog-web-result { min-height: 290px; }
.blog-web-result h3 { min-height: 70px; }
@media (max-width: 720px) {
  .blog-web-progress { align-items: flex-start; flex-direction: column; }
  .blog-web-progress-track { width: 100%; flex: none; }
  .blog-web-progress small { white-space: normal; }
}

/* v97: Web Search timeout is limited to about 20 seconds in blog.html. */


/* ===== v98 rewrite title suggestion ===== */
.blog-rewrite-suggestion {
  grid-column: 1 / -1;
  margin: 0 0 14px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(105, 240, 242, .28);
  background: linear-gradient(135deg, rgba(19, 209, 213, .13), rgba(116, 168, 255, .09));
  color: rgba(236, 252, 255, .92);
  font-size: 14px;
}
.blog-rewrite-suggestion strong { color: #7cf5f8; margin-right: 6px; }
.blog-rewrite-suggestion small { display: block; margin-top: 6px; color: rgba(230, 245, 255, .62); font-size: 12px; }

/* v100 AI category + blog web search category update */


/* v102: real recent web-search results + hero latest blog cards */
.hero-blog-teasers {
  position: absolute;
  left: clamp(92px, 7.2vw, 138px);
  top: calc(50% + 190px);
  width: min(980px, 76vw);
  z-index: 9;
  pointer-events: auto;
}
.hero-blog-teasers h2 {
  margin: 0 0 16px;
  color: #f4fbff;
  font-size: clamp(18px, 1.7vw, 28px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: .02em;
  text-shadow: 0 8px 28px rgba(0,0,0,.55);
}
.hero-blog-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.hero-blog-card {
  min-height: 92px;
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 24px;
  border: 1px solid rgba(122, 226, 255, .20);
  background: linear-gradient(135deg, rgba(255,255,255,.13), rgba(78,204,235,.08));
  box-shadow: 0 22px 60px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  text-decoration: none;
  color: #dff8ff;
  overflow: hidden;
  transition: transform .28s ease, border-color .28s ease, background .28s ease;
}
.hero-blog-card:hover { transform: translateY(-4px); border-color: rgba(112,237,255,.46); background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(78,204,235,.12)); }
.hero-blog-img { width: 78px; height: 78px; border-radius: 50%; overflow: hidden; display: block; background: rgba(5,20,32,.72); box-shadow: 0 0 0 1px rgba(134,238,255,.24); }
.hero-blog-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-blog-text strong { display: block; color: #fff; font-size: 15px; line-height: 1.17; font-weight: 900; margin-bottom: 6px; }
.hero-blog-text em { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: rgba(213,239,251,.74); font-style: normal; font-size: 12px; line-height: 1.35; }
.blog-web-search-panel .blog-web-search-head p::after { content: ' Only specific posts from the last 12 months are shown.'; color: rgba(124,245,248,.9); }
.blog-web-source { color: #7cf5f8; }
@media (max-width: 1500px) {
  .hero-blog-teasers { top: calc(50% + 174px); width: min(880px, 72vw); }
  .hero-blog-card { grid-template-columns: 66px 1fr; min-height: 82px; padding: 12px; }
  .hero-blog-img { width: 66px; height: 66px; }
}
@media (max-width: 1100px) {
  .hero-blog-teasers { position: relative; left: auto; top: auto; width: 100%; padding: 0 24px; margin: -24px auto 34px; z-index: 10; }
  .hero-blog-cards { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; }
  .hero-blog-teasers h2 { max-width: 620px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 640px) {
  .hero-blog-teasers { padding: 0 18px; margin-top: -10px; }
  .hero-blog-card { border-radius: 20px; }
}

/* v103: expanded hero blog cards + 12-month real-source web search */

.hero-blog-strip,
.hero-latest-blog,
.artlantic-hero-blog {
  position: relative;
  z-index: 9;
  width: min(82vw, 1360px) !important;
  margin: clamp(22px, 3vh, 42px) auto 0 !important;
}
.hero-blog-strip h2,
.hero-latest-blog h2,
.artlantic-hero-blog h2 {
  font-size: clamp(18px, 2vw, 30px) !important;
  margin: 0 0 16px !important;
  text-align: center;
}
.hero-blog-cards,
.hero-blog-list,
.hero-latest-posts {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(280px, 1fr)) !important;
  gap: clamp(22px, 3vw, 52px) !important;
}
.hero-blog-card,
.hero-latest-card,
.artlantic-blog-teaser {
  min-height: 154px !important;
  padding: 18px 22px !important;
  border-radius: 24px !important;
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  background: rgba(8, 30, 45, .48) !important;
  border: 1px solid rgba(126, 225, 245, .22) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.28) !important;
}
.hero-blog-card img,
.hero-latest-card img,
.artlantic-blog-teaser img {
  width: 78px !important;
  height: 78px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex: 0 0 78px !important;
}
@media (max-width: 1024px) {
  .hero-blog-strip,
  .hero-latest-blog,
  .artlantic-hero-blog { width: calc(100% - 48px) !important; }
  .hero-blog-cards,
  .hero-blog-list,
  .hero-latest-posts { grid-template-columns: 1fr !important; gap: 14px !important; }
}
@media (max-width: 768px) {
  .hero-blog-strip,
  .hero-latest-blog,
  .artlantic-hero-blog {
    width: calc(100% - 36px) !important;
    margin: 22px auto 36px !important;
    order: 3;
  }
  .hero-blog-card,
  .hero-latest-card,
  .artlantic-blog-teaser { min-height: 112px !important; padding: 14px !important; }
  .hero-blog-card img,
  .hero-latest-card img,
  .artlantic-blog-teaser img { width: 58px !important; height: 58px !important; flex-basis: 58px !important; }
}

/* v106: Web Search loads source RSS feeds concurrently, keeps concrete article URLs, accepts recent feed items even when dates are missing, and avoids empty results from overly strict filtering. */

/* v108: hero latest blog cards resized and lowered to match requested desktop/laptop/tablet span. */
.home-page .hero { overflow: hidden; }
.home-page .hero-blog-teasers {
  position: absolute !important;
  z-index: 8 !important;
  left: clamp(148px, 9.2vw, 230px) !important;
  right: clamp(68px, 7vw, 150px) !important;
  width: auto !important;
  top: clamp(690px, 72vh, 830px) !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: auto;
}
.home-page .hero-blog-teasers h2 {
  display: block !important;
  margin: 0 0 18px 0 !important;
  color: #fff !important;
  font-size: clamp(20px, 1.7vw, 28px) !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  text-align: left !important;
  text-shadow: 0 8px 28px rgba(0,0,0,.55) !important;
}
.home-page .hero-blog-cards {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(26px, 3.2vw, 58px) !important;
  width: 100% !important;
  max-width: none !important;
}
.home-page .hero-blog-card {
  min-height: clamp(118px, 10vw, 154px) !important;
  display: grid !important;
  grid-template-columns: clamp(86px, 7.5vw, 116px) 1fr !important;
  align-items: center !important;
  gap: clamp(16px, 1.4vw, 24px) !important;
  padding: clamp(16px, 1.55vw, 24px) !important;
  border-radius: 28px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(78,204,235,.08)) !important;
  border: 1px solid rgba(132, 232, 255, .24) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.12) !important;
  backdrop-filter: blur(18px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
}
.home-page .hero-blog-img,
.home-page .hero-blog-card .hero-blog-img {
  width: clamp(86px, 7.5vw, 116px) !important;
  height: clamp(86px, 7.5vw, 116px) !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: block !important;
  flex: none !important;
}
.home-page .hero-blog-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.home-page .hero-blog-text strong {
  font-size: clamp(16px, 1.15vw, 22px) !important;
  line-height: 1.12 !important;
  margin-bottom: 8px !important;
}
.home-page .hero-blog-text em {
  font-size: clamp(12px, .85vw, 15px) !important;
  line-height: 1.38 !important;
  -webkit-line-clamp: 3 !important;
}

@media (max-width: 1500px) {
  .home-page .hero-blog-teasers {
    left: clamp(125px, 9vw, 190px) !important;
    right: clamp(54px, 6vw, 116px) !important;
    top: clamp(620px, 73vh, 760px) !important;
  }
}
@media (max-width: 1180px) {
  .home-page .hero-blog-teasers {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: calc(100% - 64px) !important;
    margin: 30px auto 46px !important;
    z-index: 12 !important;
    order: 3;
  }
  .home-page .hero-blog-cards { gap: 18px !important; }
  .home-page .hero-blog-card {
    grid-template-columns: 78px 1fr !important;
    min-height: 108px !important;
    padding: 16px !important;
  }
  .home-page .hero-blog-img { width: 78px !important; height: 78px !important; }
}
@media (max-width: 768px) {
  .home-page .hero-blog-teasers {
    width: calc(100% - 34px) !important;
    margin: 26px auto 34px !important;
  }
  .home-page .hero-blog-teasers h2 { text-align: center !important; margin-bottom: 14px !important; }
  .home-page .hero-blog-cards { grid-template-columns: 1fr !important; gap: 14px !important; }
  .home-page .hero-blog-card {
    grid-template-columns: 62px 1fr !important;
    min-height: 96px !important;
    border-radius: 22px !important;
    padding: 14px !important;
  }
  .home-page .hero-blog-img { width: 62px !important; height: 62px !important; }
}

/* v109: align and lower the 3 hero blog cards under the main CTA box on desktop/laptop/tablet. */
@media (min-width: 769px) {
  .home-page .hero-blog-teasers {
    position: absolute !important;
    z-index: 8 !important;
    /* Align with the left edge of the main glass hero box */
    left: clamp(92px, 7.1vw, 150px) !important;
    /* End near the right-side radio/menu area */
    right: clamp(72px, 7.2vw, 150px) !important;
    width: auto !important;
    /* Lowered so the Artlantic Blog title is clearly visible below the hero box */
    top: clamp(735px, 79vh, 900px) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .home-page .hero-blog-teasers h2 {
    display: block !important;
    text-align: left !important;
    margin: 0 0 20px 0 !important;
    padding-left: 0 !important;
    font-size: clamp(21px, 1.85vw, 32px) !important;
    line-height: 1 !important;
  }

  .home-page .hero-blog-cards {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(28px, 3.8vw, 70px) !important;
    width: 100% !important;
    max-width: none !important;
  }

  .home-page .hero-blog-card {
    min-height: clamp(130px, 10.4vw, 166px) !important;
    grid-template-columns: clamp(92px, 7.8vw, 124px) 1fr !important;
    gap: clamp(18px, 1.6vw, 28px) !important;
    padding: clamp(18px, 1.7vw, 26px) !important;
  }

  .home-page .hero-blog-img,
  .home-page .hero-blog-card .hero-blog-img {
    width: clamp(92px, 7.8vw, 124px) !important;
    height: clamp(92px, 7.8vw, 124px) !important;
  }
}

@media (min-width: 769px) and (max-width: 1500px) {
  .home-page .hero-blog-teasers {
    left: clamp(86px, 7vw, 132px) !important;
    right: clamp(54px, 6vw, 112px) !important;
    top: clamp(690px, 78vh, 815px) !important;
  }
  .home-page .hero-blog-card {
    min-height: clamp(118px, 10vw, 146px) !important;
    grid-template-columns: clamp(78px, 7vw, 104px) 1fr !important;
  }
  .home-page .hero-blog-img,
  .home-page .hero-blog-card .hero-blog-img {
    width: clamp(78px, 7vw, 104px) !important;
    height: clamp(78px, 7vw, 104px) !important;
  }
}

/* Keep tablet/laptop layout horizontal; switch to stacked only on mobile. */
@media (min-width: 769px) and (max-width: 1180px) {
  .home-page .hero-blog-teasers {
    position: absolute !important;
    left: clamp(64px, 6.5vw, 92px) !important;
    right: clamp(42px, 5vw, 80px) !important;
    top: clamp(660px, 77vh, 770px) !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    order: initial !important;
  }
  .home-page .hero-blog-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(14px, 2vw, 26px) !important;
  }
  .home-page .hero-blog-card {
    grid-template-columns: 64px 1fr !important;
    min-height: 108px !important;
    padding: 14px !important;
    border-radius: 22px !important;
  }
  .home-page .hero-blog-img,
  .home-page .hero-blog-card .hero-blog-img {
    width: 64px !important;
    height: 64px !important;
  }
  .home-page .hero-blog-text strong { font-size: 14px !important; }
  .home-page .hero-blog-text em { font-size: 11px !important; -webkit-line-clamp: 2 !important; }
}


/* ==========================================================
   V115: restore V109 baseline + make hero blog cards visible
   on laptop and tablet with breathing space above/below.
   Applies only to Home. Portfolio/internal pages unchanged.
   ========================================================== */
.home-page .hero {
  overflow: hidden !important;
}

/* Desktop/laptop/tablet: keep the three cards horizontal and visible below the left hero box. */
@media (min-width: 769px) {
  .home-page .hero {
    min-height: clamp(900px, 100vh, 1080px) !important;
    padding-bottom: 180px !important;
  }

  .home-page .hero-blog-teasers {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: absolute !important;
    z-index: 12 !important;
    left: clamp(92px, 7.1vw, 150px) !important;
    right: clamp(72px, 7.2vw, 150px) !important;
    width: auto !important;
    top: clamp(610px, 67vh, 760px) !important;
    margin: 0 !important;
    padding: 0 0 34px 0 !important;
    pointer-events: auto !important;
  }

  .home-page .hero-blog-teasers h2 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 0 24px 0 !important; /* small free space above cards */
    text-align: left !important;
  }

  .home-page .hero-blog-cards {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(18px, 2.5vw, 46px) !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 30px 0 !important; /* small free space below cards */
  }

  .home-page .hero-blog-card {
    display: grid !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* Laptop: three cards must remain visible, not converted to a vertical/mobile block. */
@media (min-width: 1025px) and (max-width: 1500px) {
  .home-page .hero {
    min-height: clamp(840px, 100vh, 980px) !important;
  }
  .home-page .hero-blog-teasers {
    top: clamp(585px, 69vh, 720px) !important;
    left: clamp(86px, 7vw, 132px) !important;
    right: clamp(54px, 6vw, 112px) !important;
  }
  .home-page .hero-blog-card {
    min-height: clamp(112px, 9vw, 142px) !important;
    grid-template-columns: clamp(70px, 6.5vw, 96px) 1fr !important;
    padding: clamp(14px, 1.35vw, 20px) !important;
  }
  .home-page .hero-blog-img,
  .home-page .hero-blog-card .hero-blog-img {
    width: clamp(70px, 6.5vw, 96px) !important;
    height: clamp(70px, 6.5vw, 96px) !important;
  }
}

/* Tablet: keep three horizontal cards and reserve vertical space inside hero. */
@media (min-width: 769px) and (max-width: 1024px) {
  .home-page .hero {
    min-height: 920px !important;
    padding-bottom: 170px !important;
  }
  .home-page .hero-blog-teasers {
    position: absolute !important;
    left: 48px !important;
    right: 36px !important;
    top: 690px !important;
    width: auto !important;
    margin: 0 !important;
    padding-bottom: 34px !important;
    order: initial !important;
  }
  .home-page .hero-blog-teasers h2 {
    margin-bottom: 20px !important;
  }
  .home-page .hero-blog-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
  .home-page .hero-blog-card {
    grid-template-columns: 56px 1fr !important;
    min-height: 96px !important;
    padding: 12px !important;
    border-radius: 20px !important;
  }
  .home-page .hero-blog-img,
  .home-page .hero-blog-card .hero-blog-img {
    width: 56px !important;
    height: 56px !important;
  }
  .home-page .hero-blog-text strong {
    font-size: 13px !important;
    line-height: 1.15 !important;
  }
  .home-page .hero-blog-text em {
    font-size: 10.5px !important;
    line-height: 1.28 !important;
    -webkit-line-clamp: 2 !important;
  }
}

/* Mobile remains stacked between hero and Our Work. */
@media (max-width: 768px) {
  .home-page .hero {
    overflow: visible !important;
  }
  .home-page .hero-blog-teasers {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: calc(100% - 34px) !important;
    margin: 28px auto 38px !important;
    padding: 0 !important;
    z-index: 12 !important;
    order: 3 !important;
  }
  .home-page .hero-blog-cards {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* ==========================================================
   V116: hero desktop/laptop alignment + portrait tablet layout
   - Desktop/laptop: hero box starts in same vertical line as blog cards.
   - Portrait/tablet: submarine moves higher, hero box follows under it,
     blog cards are placed below hero box like mobile, with no overlap.
   ========================================================== */
@media (min-width: 1181px) {
  body.frame-page.home-page section#home .hero-copy.glass,
  body.frame-page.home-page .hero-copy.glass {
    left: clamp(118px, 7.45vw, 160px) !important;
    right: auto !important;
    transform: none !important;
  }

  body.frame-page.home-page .hero-blog-teasers {
    left: clamp(118px, 7.45vw, 160px) !important;
    right: clamp(72px, 7.2vw, 150px) !important;
    top: clamp(650px, 72vh, 790px) !important;
  }
}

@media (min-width: 1025px) and (max-width: 1180px) {
  body.frame-page.home-page section#home .hero-copy.glass,
  body.frame-page.home-page .hero-copy.glass {
    left: clamp(74px, 7vw, 94px) !important;
    right: auto !important;
    transform: none !important;
  }

  body.frame-page.home-page .hero-blog-teasers {
    left: clamp(74px, 7vw, 94px) !important;
    right: clamp(38px, 5vw, 72px) !important;
    top: clamp(650px, 72vh, 760px) !important;
  }
}

/* Portrait tablets: use stacked flow so blog cards cannot sit behind hero box. */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
  body.frame-page.home-page .hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    min-height: auto !important;
    height: auto !important;
    padding-top: 70px !important;
    padding-bottom: 70px !important;
    overflow: visible !important;
  }

  body.frame-page.home-page .hero-orb,
  body.frame-page.home-page .hero .hero-orb {
    order: 1 !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: min(96vw, 980px) !important;
    margin: -40px auto -70px !important;
    z-index: 2 !important;
  }

  body.frame-page.home-page .hero-submarine {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    transform: none !important;
  }

  body.frame-page.home-page section#home .hero-copy.glass,
  body.frame-page.home-page .hero-copy.glass {
    order: 2 !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    width: calc(100% - 80px) !important;
    max-width: 900px !important;
    margin: 0 auto 34px !important;
    z-index: 20 !important;
  }

  body.frame-page.home-page .hero-blog-teasers {
    order: 3 !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: calc(100% - 80px) !important;
    max-width: 900px !important;
    margin: 8px auto 46px !important;
    padding: 0 !important;
    z-index: 12 !important;
  }

  body.frame-page.home-page .hero-blog-teasers h2 {
    margin: 0 0 18px 0 !important;
    text-align: left !important;
  }

  body.frame-page.home-page .hero-blog-cards {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin: 0 !important;
  }

  body.frame-page.home-page .hero-blog-card {
    grid-template-columns: 86px 1fr !important;
    min-height: 116px !important;
    padding: 16px !important;
  }

  body.frame-page.home-page .hero-blog-img,
  body.frame-page.home-page .hero-blog-card .hero-blog-img {
    width: 86px !important;
    height: 86px !important;
  }
}

/* ==========================================================
   V117: final hero alignment + portrait tablet submarine spacing
   - Desktop/laptop: hero box left edge and Artlantic Blog cards start on the same line.
   - Portrait tablet: submarine is moved higher into the open water area, hero box is pulled closer under it,
     and blog cards stay below the box with clear breathing room.
   ========================================================== */
:root {
  --hero-left-align-wide: clamp(134px, 9.1vw, 178px);
  --hero-right-align-wide: clamp(72px, 7.2vw, 150px);
  --hero-left-align-laptop: clamp(92px, 8.6vw, 128px);
  --hero-right-align-laptop: clamp(38px, 5vw, 72px);
}

@media (min-width: 1181px) {
  body.frame-page.home-page section#home .hero-copy.glass,
  body.frame-page.home-page .hero-copy.glass {
    left: var(--hero-left-align-wide) !important;
    right: auto !important;
    transform: none !important;
  }

  body.frame-page.home-page .hero-blog-teasers {
    left: var(--hero-left-align-wide) !important;
    right: var(--hero-right-align-wide) !important;
    top: clamp(665px, 73vh, 805px) !important;
  }
}

@media (min-width: 1025px) and (max-width: 1180px) {
  body.frame-page.home-page section#home .hero-copy.glass,
  body.frame-page.home-page .hero-copy.glass {
    left: var(--hero-left-align-laptop) !important;
    right: auto !important;
    transform: none !important;
  }

  body.frame-page.home-page .hero-blog-teasers {
    left: var(--hero-left-align-laptop) !important;
    right: var(--hero-right-align-laptop) !important;
    top: clamp(665px, 73vh, 780px) !important;
  }
}

/* Portrait tablet final layout: more sea above the content, submarine higher, no overlap. */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
  body.frame-page.home-page .hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: auto !important;
    height: auto !important;
    padding-top: 30px !important;
    padding-bottom: 72px !important;
    overflow: visible !important;
  }

  body.frame-page.home-page .hero-orb,
  body.frame-page.home-page .hero .hero-orb {
    order: 1 !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: min(104vw, 1040px) !important;
    margin: -92px auto -158px !important;
    z-index: 2 !important;
  }

  body.frame-page.home-page .hero-submarine {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    transform: none !important;
  }

  body.frame-page.home-page section#home .hero-copy.glass,
  body.frame-page.home-page .hero-copy.glass {
    order: 2 !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    width: calc(100% - 80px) !important;
    max-width: 900px !important;
    margin: 0 auto 30px !important;
    z-index: 20 !important;
  }

  body.frame-page.home-page .hero-blog-teasers {
    order: 3 !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: calc(100% - 80px) !important;
    max-width: 900px !important;
    margin: 10px auto 52px !important;
    padding: 0 !important;
    z-index: 12 !important;
  }

  body.frame-page.home-page .hero-blog-cards {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    margin: 0 !important;
  }
}

/* ==========================================================
   V119: final desktop/laptop hero-box alignment
   The hero glass box and the Artlantic Blog cards now start
   on the exact same left vertical line on desktop and laptop.
   Tablet/mobile layout from V117 is preserved.
   ========================================================== */
:root {
  --hero-v119-align-wide: clamp(168px, 12.2vw, 224px);
  --hero-v119-align-laptop: clamp(118px, 9.4vw, 166px);
  --hero-v119-right-wide: clamp(72px, 7.2vw, 150px);
  --hero-v119-right-laptop: clamp(38px, 5vw, 72px);
}

@media (min-width: 1181px) {
  body.frame-page.home-page section#home .hero-copy.glass,
  body.frame-page.home-page .hero-copy.glass {
    left: var(--hero-v119-align-wide) !important;
    right: auto !important;
    transform: none !important;
  }

  body.frame-page.home-page .hero-blog-teasers {
    left: var(--hero-v119-align-wide) !important;
    right: var(--hero-v119-right-wide) !important;
    width: auto !important;
  }
}

@media (min-width: 1025px) and (max-width: 1180px) {
  body.frame-page.home-page section#home .hero-copy.glass,
  body.frame-page.home-page .hero-copy.glass {
    left: var(--hero-v119-align-laptop) !important;
    right: auto !important;
    transform: none !important;
  }

  body.frame-page.home-page .hero-blog-teasers {
    left: var(--hero-v119-align-laptop) !important;
    right: var(--hero-v119-right-laptop) !important;
    width: auto !important;
  }
}

/* Keep the portrait-tablet submarine higher in the empty water area. */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
  body.frame-page.home-page .hero-orb,
  body.frame-page.home-page .hero .hero-orb {
    margin: -128px auto -170px !important;
    width: min(106vw, 1060px) !important;
  }

  body.frame-page.home-page section#home .hero-copy.glass,
  body.frame-page.home-page .hero-copy.glass {
    margin-top: 0 !important;
  }
}

/* ==========================================================
   V119 alignment patch: move only the upper hero content box
   so its visible left edge starts exactly with the blog cards
   on desktop and laptop. Blog/cards/tablet/mobile stay as-is.
   ========================================================== */
@media (min-width: 1181px) {
  body.frame-page.home-page section#home .hero-copy.glass,
  body.frame-page.home-page .hero-copy.glass {
    left: calc(var(--hero-v119-align-wide) - 80px) !important;
  }
}

@media (min-width: 1025px) and (max-width: 1180px) {
  body.frame-page.home-page section#home .hero-copy.glass,
  body.frame-page.home-page .hero-copy.glass {
    left: calc(var(--hero-v119-align-laptop) - 80px) !important;
  }
}

/* ==========================================================
   V124: laptop-only Home blog cards polish
   - Moves Artlantic Blog title + 3 cards slightly upward only on laptop widths.
   - Adds compact READ MORE + arrow treatment on the Home teaser cards.
   Desktop, tablet and mobile breakpoints stay unchanged.
   ========================================================== */
@media (min-width: 1025px) and (max-width: 1500px) {
  body.frame-page.home-page .hero-blog-teasers {
    top: clamp(590px, 67vh, 705px) !important;
  }
}

.home-page .hero-blog-readmore {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 14px !important;
  color: #22e8ff !important;
  font-size: clamp(10px, .72vw, 12px) !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  font-style: normal !important;
  white-space: nowrap !important;
}

.home-page .hero-blog-readmore::after {
  content: '→' !important;
  display: inline-block !important;
  font-size: 18px !important;
  line-height: 1 !important;
  transform: translateY(-1px) !important;
  transition: transform .24s ease !important;
}

.home-page .hero-blog-card:hover .hero-blog-readmore::after {
  transform: translate(5px, -1px) !important;
}

@media (max-width: 768px) {
  .home-page .hero-blog-readmore { margin-top: 10px !important; font-size: 10px !important; }
}

/* ============================================================
   v125: Softer transition between home hero background and the
   rest of the page. This removes the hard color cut under the
   hero/blog area without changing responsive positions.
   ============================================================ */
body.frame-page.home-page {
  background:
    radial-gradient(ellipse 90% 65% at 88% 4%,  rgba(0, 180, 230, 0.38) 0%, transparent 52%),
    radial-gradient(ellipse 55% 45% at 90% 10%, rgba(0, 220, 255, 0.18) 0%, transparent 42%),
    radial-gradient(ellipse 65% 55% at 6% 80%,  rgba(200, 20, 100, 0.30) 0%, transparent 52%),
    radial-gradient(ellipse 40% 35% at 4%  90%,  rgba(220, 0,  120, 0.14) 0%, transparent 44%),
    radial-gradient(ellipse 50% 40% at 50% 50%,  rgba(5, 35, 60, 0.45)   0%, transparent 70%),
    linear-gradient(160deg, #010508 0%, #010d18 45%, #020b12 100%) !important;
}

body.frame-page.home-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 65% at 88% 4%,  rgba(0, 180, 230, 0.38) 0%, transparent 52%),
    radial-gradient(ellipse 55% 45% at 90% 10%, rgba(0, 220, 255, 0.18) 0%, transparent 42%),
    radial-gradient(ellipse 65% 55% at 6% 80%,  rgba(200, 20, 100, 0.30) 0%, transparent 52%),
    radial-gradient(ellipse 40% 35% at 4%  90%,  rgba(220, 0,  120, 0.14) 0%, transparent 44%),
    radial-gradient(ellipse 50% 40% at 50% 50%,  rgba(5, 35, 60, 0.45)   0%, transparent 70%),
    linear-gradient(160deg, #010508 0%, #010d18 45%, #020b12 100%);
}

body.frame-page.home-page .site-bg {
  background:
    radial-gradient(ellipse 90% 65% at 88% 4%,  rgba(0, 180, 230, 0.38) 0%, transparent 52%),
    radial-gradient(ellipse 55% 45% at 90% 10%, rgba(0, 220, 255, 0.18) 0%, transparent 42%),
    radial-gradient(ellipse 65% 55% at 6% 80%,  rgba(200, 20, 100, 0.30) 0%, transparent 52%),
    radial-gradient(ellipse 40% 35% at 4%  90%,  rgba(220, 0,  120, 0.14) 0%, transparent 44%),
    radial-gradient(ellipse 50% 40% at 50% 50%,  rgba(5, 35, 60, 0.45)   0%, transparent 70%),
    linear-gradient(160deg, #010508 0%, #010d18 45%, #020b12 100%) !important;
}

body.frame-page.home-page .hero {
  position: relative !important;
  overflow: visible !important;
}

body.frame-page.home-page .hero::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

body.frame-page.home-page .hero-underwater-bg::after {
  height: 52vh !important;
  min-height: 420px !important;
  bottom: -10vh !important;
  background: linear-gradient(
    to bottom,
    rgba(1, 8, 14, 0) 0%,
    rgba(1, 10, 16, 0.18) 28%,
    rgba(1, 9, 14, 0.64) 66%,
    rgba(1, 5, 8, 0.98) 100%
  ) !important;
}

body.frame-page.home-page .hero-copy,
body.frame-page.home-page .hero-blog-teasers,
body.frame-page.home-page .hero-orb {
  z-index: 10 !important;
}

body.frame-page.home-page .portfolio-carousel {
  background: linear-gradient(to bottom, rgba(1,5,8,0.88), rgba(1,5,8,0.98) 38%, rgba(1,5,8,1) 100%) !important;
}

/* V129 — attach the hero-to-page fade directly to the background image */
.hero .hero-underwater-bg::after,
body.frame-page.home-page .hero .hero-underwater-bg::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(180px, 30vh, 360px);
  min-height: 180px;
  pointer-events: none;
  z-index: 1 !important;
  background: linear-gradient(
    to bottom,
    rgba(1, 8, 14, 0) 0%,
    rgba(1, 8, 14, 0.14) 28%,
    rgba(1, 7, 12, 0.62) 66%,
    #01070c 100%
  ) !important;
}

@media (max-width: 768px) {
  body.frame-page.home-page .hero .hero-underwater-bg::after {
    height: clamp(150px, 25vh, 250px);
    min-height: 150px;
    background: linear-gradient(
      to bottom,
      rgba(1, 8, 14, 0) 0%,
      rgba(1, 8, 14, 0.16) 26%,
      rgba(1, 7, 12, 0.64) 64%,
      #01070c 100%
    ) !important;
  }
}

/* V130 — make the hero fade part of the image background itself */
body.frame-page.home-page .hero .hero-underwater-bg {
  background-image:
    linear-gradient(
      to bottom,
      rgba(1, 8, 14, 0) 28%,
      rgba(1, 8, 14, 0.3) 48%,
      rgba(1, 7, 12, 0.74) 70%,
      rgba(1, 7, 12, 0.96) 88%,
      #01070c 100%
    ),
    linear-gradient(90deg, rgba(0, 5, 10, 0.16), rgba(0, 10, 18, 0.03) 42%, rgba(0, 8, 16, 0.10)) !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

body.frame-page.home-page .hero .hero-underwater-bg::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

@media (max-width: 768px) {
  body.frame-page.home-page .hero .hero-underwater-bg {
    background-image:
      linear-gradient(
        to bottom,
        rgba(1, 8, 14, 0) 22%,
        rgba(1, 8, 14, 0.34) 43%,
        rgba(1, 7, 12, 0.78) 66%,
        rgba(1, 7, 12, 0.98) 86%,
        #01070c 100%
      ),
      linear-gradient(90deg, rgba(0, 5, 10, 0.16), rgba(0, 10, 18, 0.03) 42%, rgba(0, 8, 16, 0.10)) !important;
    background-size: 100% 100% !important;
    background-position: center !important;
  }
}

/* ============================================================
   V127: Bring Home Artlantic Blog teaser section fully to front.
   Keeps the hero/background gradient layers behind the blog title
   and cards so they stay readable/clickable.
   ============================================================ */
body.frame-page.home-page .hero {
  isolation: isolate !important;
}

body.frame-page.home-page .hero::before,
body.frame-page.home-page .hero::after,
body.frame-page.home-page .hero-underwater-bg,
body.frame-page.home-page .hero-underwater-bg::before,
body.frame-page.home-page .hero-underwater-bg::after {
  z-index: 0 !important;
  pointer-events: none !important;
}

body.frame-page.home-page .hero-blog-teasers,
body.frame-page.home-page .hero-blog-teasers h2,
body.frame-page.home-page .hero-blog-cards,
body.frame-page.home-page .hero-blog-card {
  position: relative !important;
  z-index: 999 !important;
}

/* ============================================================
   V128: Fix Artlantic Blog visibility after bring-to-front patch.
   Keep teaser wrapper absolute on desktop/laptop and put it above
   all hero/background layers. Do not change tablet/mobile layout.
   ============================================================ */
body.frame-page.home-page .hero {
  position: relative !important;
  isolation: isolate !important;
}

body.frame-page.home-page .hero::before,
body.frame-page.home-page .hero::after,
body.frame-page.home-page .hero-underwater-bg,
body.frame-page.home-page .hero-underwater-bg::before,
body.frame-page.home-page .hero-underwater-bg::after {
  z-index: 0 !important;
  pointer-events: none !important;
}

body.frame-page.home-page .hero-copy,
body.frame-page.home-page .hero-orb {
  position: relative !important;
  z-index: 20 !important;
}

@media (min-width: 1101px) {
  body.frame-page.home-page .hero-blog-teasers {
    position: absolute !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.frame-page.home-page .hero-blog-teasers h2,
  body.frame-page.home-page .hero-blog-cards,
  body.frame-page.home-page .hero-blog-card {
    position: relative !important;
    z-index: 10000 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

@media (max-width: 1100px) {
  body.frame-page.home-page .hero-blog-teasers {
    z-index: 9999 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.frame-page.home-page .hero-blog-teasers h2,
  body.frame-page.home-page .hero-blog-cards,
  body.frame-page.home-page .hero-blog-card {
    position: relative !important;
    z-index: 10000 !important;
  }
}

/* ============================================================
   V131: Lower only the Our Work title a little below Artlantic Blog.
   Based on V128 layout; keeps the rest of the page unchanged.
   ============================================================ */
body.frame-page.home-page .portfolio-carousel h2 {
  transform: translateY(34px) !important;
  margin-bottom: 86px !important;
}

/* ============================================================
   V132: Desktop/laptop submarine positioning — align vertically
   with the text box, center horizontally in the right empty space.
   Tablet and mobile layouts are completely untouched.
   ============================================================ */

/* Shared flex layout for all desktop/laptop */
@media (min-width: 1025px) {
  body.frame-page.home-page .hero-orb,
  body.frame-page .hero .hero-orb,
  .hero .hero-orb {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: none !important;
    margin-top: -100px !important;
    align-self: center !important;
    z-index: 20 !important;
  }

  body.frame-page.home-page .hero-submarine,
  body.frame-page .hero .hero-submarine,
  .hero .hero-submarine {
    height: auto !important;
    display: block !important;
    margin: 0 !important;
  }
}

/* Laptop (1025–1600px): moderate submarine size + lower blog section */
@media (min-width: 1025px) and (max-width: 1600px) {
  body.frame-page.home-page .hero-submarine,
  body.frame-page .hero .hero-submarine,
  .hero .hero-submarine {
    width: min(720px, 90%) !important;
    max-width: 720px !important;
  }

  /* Lower Artlantic Blog title + cards on laptop */
  body.frame-page.home-page .hero-blog-teasers {
    top: clamp(720px, 80vh, 880px) !important;
  }
}

/* Large desktop (>1600px): bigger submarine to fill the right space */
@media (min-width: 1601px) {
  body.frame-page.home-page .hero-submarine,
  body.frame-page .hero .hero-submarine,
  .hero .hero-submarine {
    width: min(1060px, 92%) !important;
    max-width: 1060px !important;
  }
}

/* ============================================================
   V133: Ensure hero is always tall enough to fully contain
   the absolutely-positioned blog teasers on all screen sizes.
   Fixes cut-off cards on smaller laptop / short-viewport screens.
   Desktop/laptop only — tablet/mobile use relative flow, no fix needed.
   ============================================================ */

/* Default laptop range (1025–1180px): blog top clamps at ~650–760px */
@media (min-width: 1025px) and (max-width: 1180px) {
  body.frame-page.home-page .hero {
    min-height: max(100vh, calc(72vh + 340px), 990px) !important;
  }
}

/* Standard desktop and large laptop (1181–1600px): blog top clamps at 720–880px (V132) */
@media (min-width: 1181px) and (max-width: 1600px) {
  body.frame-page.home-page .hero {
    min-height: max(100vh, calc(80vh + 340px), 1060px) !important;
  }
}

/* Large desktop (1601px+): blog top clamps at 650–790px */
@media (min-width: 1601px) {
  body.frame-page.home-page .hero {
    min-height: max(100vh, calc(72vh + 340px), 990px) !important;
  }
}

/* ============================================================
   V135: Responsive spacing between hero text card and Artlantic Blog title.
   padding-top on the container works for both absolute (desktop) and
   relative (tablet/mobile) positioning — no layout side-effects.
   ============================================================ */
body.frame-page.home-page .hero-blog-teasers,
.home-page .hero-blog-teasers,
.hero-blog-teasers {
  padding-top: clamp(28px, 4vw, 56px) !important;
}

/* Tighten a little on small mobile so it doesn't eat too much space */
@media (max-width: 480px) {
  body.frame-page.home-page .hero-blog-teasers,
  .home-page .hero-blog-teasers,
  .hero-blog-teasers {
    padding-top: 20px !important;
  }
}

/* ============================================================
   V136: Video player — teal/tirkiz border matching blog cards.
         Close button (×) — perfect centering fix.
   ============================================================ */

/* Teal stroke on opened video player, same family as blog cards */
.hero-video-widget.is-open .floating-video-player,
.floating-video-widget.hero-video-widget.is-open .floating-video-player {
  border: 1px solid rgba(87, 211, 255, .28) !important;
  box-shadow:
    0 22px 60px rgba(0,0,0,.50),
    0 0 0 1px rgba(87,211,255,.12),
    0 0 22px rgba(0,195,215,.14) !important;
}

/* Close button — force perfect centering of × glyph */
.hero-video-widget .floating-video-close,
.floating-video-widget.hero-video-widget .floating-video-close {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 20px !important;
  font-family: Arial, sans-serif !important;
  text-align: center !important;
  /* Nudge: some browsers render × slightly high */
  padding-top: 1px !important;
}

/* ============================================================
   V142: Admin panel — server-side persistence.
         Blog delete button + portfolio delete/upload overlay.
   ============================================================ */

/* Blog delete button — visible only in admin mode */
.blog-delete-btn {
  display: none !important;
  position: absolute !important;
  top: 10px !important;
  left: 56px !important;
  z-index: 6 !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 5px 12px !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  color: #fff !important;
  background: rgba(200,40,40,.82) !important;
  cursor: pointer !important;
  backdrop-filter: blur(6px) !important;
}
body.blog-admin .blog-delete-btn { display: inline-flex !important; }
.blog-delete-btn:hover { background: rgba(220,30,30,.95) !important; }

/* Portfolio admin: delete X overlay on each card */
.pf-del-btn {
  display: none !important;
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 20 !important;
  width: 28px !important;
  height: 28px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(200,30,30,.88) !important;
  color: #fff !important;
  font-size: 16px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  align-items: center !important;
  justify-content: center !important;
}
body.admin-mode .pf-del-btn { display: flex !important; }
.pf-del-btn:hover { background: rgba(220,20,20,1) !important; }

/* Portfolio admin: + Add photo button */
.pf-upload-btn {
  display: none !important;
  position: absolute !important;
  bottom: 18px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 20 !important;
  border: 1px solid rgba(87,211,255,.45) !important;
  border-radius: 999px !important;
  padding: 8px 22px !important;
  background: rgba(4,17,26,.88) !important;
  color: #65e7ff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  backdrop-filter: blur(8px) !important;
}
body.admin-mode .pf-upload-btn { display: inline-block !important; }
.pf-upload-btn:hover { background: rgba(4,30,44,.95) !important; border-color: rgba(87,211,255,.8) !important; }

/* Blog form note update */
.blog-form-note { color: rgba(100,180,210,.7) !important; font-size: 12px !important; }

/* Hero name block – replaces restangle-space image */
.hero-name-block {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: 18px 28px !important;
  line-height: 1.2 !important;
}
.hero-name-title {
  font-size: clamp(1.6rem, 3.2vw, 2.6rem) !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  white-space: nowrap !important;
}
.hero-name-subtitle {
  font-size: clamp(0.78rem, 1.3vw, 1rem) !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  color: rgba(255,255,255,0.72) !important;
  margin-top: 6px !important;
}

/* Hero intro row: avatar + name side by side */
.hero-intro-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 20px !important;
  margin-bottom: 4px !important;
}
.hero-name-block {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  flex: 1 !important;
}
.hero-name-title {
  font-size: clamp(1.3rem, 2.4vw, 2rem) !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  line-height: 1.1 !important;
}
.hero-name-subtitle {
  font-size: clamp(0.7rem, 1.1vw, 0.9rem) !important;
  font-weight: 400 !important;
  letter-spacing: 0.03em !important;
  color: rgba(255,255,255,0.7) !important;
  margin-top: 5px !important;
  line-height: 1.3 !important;
}

/* Hero name block – absolute next to avatar (avatar: left:62px, top:-72px, 160px wide) */
.hero-copy.glass .hero-name-block {
  position: absolute !important;
  left: calc(62px + 160px + 18px) !important;
  top: -72px !important;
  height: 160px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: 0 !important;
}
.hero-copy.glass .hero-name-title {
  font-size: clamp(1.2rem, 2.2vw, 1.9rem) !important;
  font-weight: 900 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  line-height: 1.1 !important;
}
.hero-copy.glass .hero-name-subtitle {
  font-size: clamp(0.68rem, 1vw, 0.85rem) !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  color: rgba(255,255,255,0.68) !important;
  margin-top: 7px !important;
  line-height: 1.35 !important;
  max-width: 240px !important;
  white-space: normal !important;
}

/* Show caption below video when hero-card widget is open */
.hero-copy.glass .hero-card-video-widget .floating-video-caption {
  display: none !important;
}
.hero-copy.glass .hero-card-video-widget.is-open .floating-video-caption {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -70px !important;
  top: auto !important;
  width: 100% !important;
  padding: 10px 16px !important;
  background: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  text-align: center !important;
  transform: none !important;
  z-index: 10 !important;
}
.hero-copy.glass .hero-card-video-widget.is-open .floating-video-caption strong {
  display: block !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  letter-spacing: 0.1em !important;
  color: #fff !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}
.hero-copy.glass .hero-card-video-widget.is-open .floating-video-caption small {
  display: block !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  color: rgba(255,255,255,0.7) !important;
  margin-top: 4px !important;
  line-height: 1.3 !important;
  text-transform: none !important;
}

/* Caption overlay: inside video at bottom, not below it */
.hero-copy.glass .hero-card-video-widget.is-open .floating-video-caption {
  bottom: 0 !important;
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  padding: 28px 20px 18px !important;
  background: linear-gradient(0deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0) 100%) !important;
  border-radius: 0 !important;
}

/* Fix: mobile paragraph overlapping circular image in hero blog cards */
@media (max-width: 768px) {
  body.frame-page.home-page .hero-blog-card,
  .home-page .hero-blog-card {
    display: grid !important;
    grid-template-columns: 72px 1fr !important;
    gap: 12px !important;
    align-items: center !important;
  }
  body.frame-page.home-page .hero-blog-img,
  body.frame-page.home-page .hero-blog-card .hero-blog-img,
  .home-page .hero-blog-img,
  .home-page .hero-blog-card .hero-blog-img {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    position: relative !important;
    align-self: center !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    flex-shrink: 0 !important;
  }
  body.frame-page.home-page .hero-blog-text,
  .home-page .hero-blog-text {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  body.frame-page.home-page .hero-blog-text strong,
  .home-page .hero-blog-text strong {
    font-size: 14px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    word-break: break-word !important;
  }
  body.frame-page.home-page .hero-blog-text em,
  .home-page .hero-blog-text em {
    font-size: 11px !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow: hidden !important;
    -webkit-line-clamp: 3 !important;
  }
}

/* V143: Keep the blog block in the page flow directly above Clients & Partners. */
body.frame-page.home-page .hero-blog-teasers,
.home-page .hero-blog-teasers {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  z-index: 50 !important;
  width: calc(100% - 120px) !important;
  max-width: none !important;
  margin: clamp(56px, 7vw, 104px) auto clamp(42px, 5vw, 76px) !important;
  padding: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.frame-page.home-page .hero-blog-teasers h2,
.home-page .hero-blog-teasers h2 {
  margin: 0 0 20px !important;
  padding: 0 !important;
  text-align: left !important;
}

body.frame-page.home-page .hero-blog-cards,
.home-page .hero-blog-cards {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(24px, 3vw, 48px) !important;
  width: 100% !important;
  max-width: none !important;
}

@media (max-width: 1024px) {
  body.frame-page.home-page .hero-blog-teasers,
  .home-page .hero-blog-teasers {
    width: calc(100% - clamp(36px, 8vw, 72px)) !important;
  }
}

@media (max-width: 768px) {
  body.frame-page.home-page .hero-blog-teasers,
  .home-page .hero-blog-teasers {
    width: calc(100% - 36px) !important;
    margin: 38px auto 42px !important;
  }

  body.frame-page.home-page .hero-blog-cards,
  .home-page .hero-blog-cards {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body.frame-page.home-page .hero-blog-teasers h2,
  .home-page .hero-blog-teasers h2 {
    text-align: center !important;
    margin-bottom: 14px !important;
  }
}

/* Avatar intro video: fill the hero glass box on every viewport.
   The source is portrait, so cover keeps the box filled without leaving
   the right and bottom gaps caused by contain-sized video dimensions. */
.hero-copy.glass .hero-card-video-widget.is-open,
.hero-copy.glass .floating-video-widget.hero-video-widget.hero-card-video-widget.is-open {
  left: 34px !important;
  top: 34px !important;
  width: calc(100% - 68px) !important;
  height: calc(100% - 68px) !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.hero-copy.glass .hero-card-video-widget.is-open .floating-video-player,
.hero-copy.glass .floating-video-widget.hero-video-widget.hero-card-video-widget.is-open .floating-video-player {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center center !important;
}

@media (max-width: 1024px) {
  .hero-copy.glass .hero-card-video-widget.is-open,
  .hero-copy.glass .floating-video-widget.hero-video-widget.hero-card-video-widget.is-open {
    left: 24px !important;
    top: 24px !important;
    width: calc(100% - 48px) !important;
    height: calc(100% - 48px) !important;
  }
}

@media (max-width: 640px) {
  .hero-copy.glass .hero-card-video-widget.is-open,
  .hero-copy.glass .floating-video-widget.hero-video-widget.hero-card-video-widget.is-open {
    left: 16px !important;
    top: 16px !important;
    width: calc(100% - 32px) !important;
    height: calc(100% - 32px) !important;
  }
}

/* ============================================================
   Project estimate flow
   Three-step CTA cards + expandable design package calculator.
   ============================================================ */
.estimate-flow {
  position: relative;
  z-index: 60;
  width: min(1180px, calc(100% - 120px));
  margin: clamp(26px, 4vw, 64px) auto 86px;
  color: #eafaff;
}

.estimate-flow-heading {
  max-width: 720px;
  margin: 0 auto 40px;
  text-align: center;
}

.estimate-flow-heading h2,
.estimate-panel-heading h2 {
  margin: 0;
  color: #f6fdff;
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: .01em;
  text-shadow: 0 8px 26px rgba(0,0,0,.45);
}

.estimate-flow-heading p,
.estimate-panel-heading p {
  margin: 10px auto 0;
  color: rgba(218,243,252,.72);
  font-size: 12px;
  line-height: 1.55;
}

.estimate-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.estimate-step-card {
  position: relative;
  isolation: isolate;
  min-height: 158px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 82px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(87,211,255,.22);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(4,25,38,.96), rgba(7,43,59,.88));
  box-shadow: 0 18px 42px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color .28s ease, box-shadow .28s ease;
}

.estimate-step-card:hover,
.estimate-step-card:focus-within {
  border-color: rgba(121,229,247,.38);
  box-shadow: 0 18px 42px rgba(0,0,0,.36), 0 0 20px rgba(80,221,238,.12), inset 0 1px 0 rgba(220,252,255,.12);
}

.estimate-step-number {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 8px;
  color: rgba(0,195,215,.28);
  background: rgba(0,195,215,.10);
  font-size: 75px;
  line-height: 1;
  font-weight: 900;
  transition: color .24s ease, text-shadow .24s ease;
}

.estimate-step-card:hover .estimate-step-number,
.estimate-step-card:focus-within .estimate-step-number {
  color: rgba(255,255,255,.96);
  text-shadow: 0 0 10px rgba(184,244,255,.30);
}

.estimate-step-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px 24px 20px;
}

.estimate-step-copy h3 {
  margin: 0 0 7px;
  color: #ffffff;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 900;
}

.estimate-step-copy p {
  margin: 0;
  max-width: 32ch;
  color: rgba(226,246,252,.72);
  font-size: 10px;
  line-height: 1.45;
}

.estimate-step-card > img,
.estimate-step-card > .estimate-step-media {
  width: 100%;
  height: 100%;
  min-height: 158px;
  display: block;
  overflow: hidden;
}

.estimate-step-card > .estimate-step-media > img {
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.estimate-trigger {
  margin-top: auto;
  padding: 8px 14px;
  font-size: 9px;
  letter-spacing: 1px;
}

.estimate-panel {
  margin-top: 28px;
  padding: clamp(22px, 3vw, 38px);
  border: 1px solid rgba(117,220,255,.28);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(25,64,88,.98), rgba(18,49,69,.98));
  box-shadow: 0 24px 70px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08);
}

.estimate-panel[hidden] {
  display: none !important;
}

.estimate-panel-heading {
  text-align: center;
}

.estimate-panel-heading h2 {
  font-size: clamp(22px, 2vw, 30px);
}

.estimate-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  margin-top: 26px;
}

.estimate-product {
  position: relative;
  overflow: hidden;
  min-width: 0;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto 34px;
  gap: 10px;
  align-items: center;
  padding: 9px;
  border: 1px solid rgba(89,211,238,.18);
  border-radius: 10px;
  color: #e9fbff;
  background: rgba(1,18,29,.84);
  text-align: left;
  cursor: pointer;
  transition: background .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}

.estimate-product:hover {
  border-color: rgba(104,233,247,.58);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.24);
}

.estimate-product.is-selected {
  border-color: rgba(104,233,247,.58);
  background: rgba(1,18,29,.84);
  box-shadow: 0 10px 24px rgba(0,0,0,.24);
}

.estimate-product-image {
  width: 60px;
  height: 62px;
  overflow: hidden;
  display: block;
  border-radius: 7px;
  background: #0a2534;
}

.estimate-product-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.estimate-product-info {
  min-width: 0;
}

.estimate-product-info strong {
  display: block;
  margin-bottom: 3px;
  color: #f5fdff;
  font-size: 11px;
  line-height: 1.2;
}

.estimate-product-info small {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(224,246,252,.68);
  font-size: 9px;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.estimate-product-price {
  align-self: start;
  padding-top: 3px;
  color: #6de9f2;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.estimate-product.is-selected .estimate-product-price {
  color: #6de9f2;
}

.estimate-product-action {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(135deg, #0a98ad, #0bc1c2);
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
}

.estimate-product.is-selected .estimate-product-action {
  background: #34ba6c;
  font-size: 0;
}

.estimate-product.is-selected .estimate-product-action::before {
  content: "✓";
  font-size: 18px;
  font-weight: 900;
}

.estimate-summary {
  min-height: 44px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 10px 14px;
  border: 1px solid rgba(88,211,241,.16);
  border-radius: 8px;
  background: rgba(1,18,29,.92);
}

.estimate-summary span {
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}

.estimate-summary strong {
  overflow: hidden;
  color: rgba(219,243,250,.68);
  font-size: 10px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.estimate-summary b {
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  white-space: nowrap;
}

.estimate-contact {
  margin-top: 32px;
}

.estimate-contact-heading {
  margin-bottom: 20px;
}

.estimate-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}

.estimate-contact-grid label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
}

.estimate-contact-grid label > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.estimate-contact-grid input,
.estimate-contact-grid textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(96,211,239,.17);
  border-radius: 5px;
  outline: none;
  padding: 11px 13px;
  color: #e9fbff;
  background: rgba(1,18,29,.86);
  font: 500 11px/1.35 'Cairo', sans-serif;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.estimate-contact-grid input {
  height: 38px;
}

.estimate-contact-grid textarea {
  resize: vertical;
}

.estimate-contact-grid input:focus,
.estimate-contact-grid textarea:focus {
  border-color: rgba(99,235,246,.76);
  box-shadow: 0 0 0 3px rgba(0,195,215,.10);
}

.estimate-contact-grid input::placeholder,
.estimate-contact-grid textarea::placeholder {
  color: rgba(206,237,246,.48);
}

.estimate-message-field {
  grid-column: 1 / -1;
}

.estimate-submit-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}

.estimate-submit {
  padding: 11px 22px;
  border-color: rgba(255,172,92,.9);
  background: linear-gradient(135deg, #ef8738, #f3a14d);
  font-size: 10px;
  letter-spacing: 1px;
}

.estimate-form-status {
  min-height: 18px;
  color: rgba(217,246,252,.76);
  font-size: 11px;
  text-align: right;
}

.estimate-form-status.is-success {
  color: #9ff4bb;
}

.estimate-form-status.is-error {
  color: #ffc1aa;
}

.estimate-submit-frame {
  position: absolute;
  width: 1px;
  height: 1px;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 1100px) {
  .estimate-flow {
    width: calc(100% - 48px);
  }

  .estimate-steps {
    grid-template-columns: 1fr;
    max-width: 760px;
    margin: 0 auto;
  }
}

/* Smaller laptops and landscape tablets need full-width estimate cards,
   rather than three cramped columns. */
@media (min-width: 1101px) and (max-width: 1400px) {
  .estimate-steps {
    grid-template-columns: 1fr;
    max-width: 760px;
    margin: 0 auto;
  }
}

/* Use the available width efficiently when estimate cards are stacked on
   tablets and smaller laptops: wider copy and a meaningful image column. */
@media (min-width: 701px) and (max-width: 1400px) {
  .estimate-steps {
    width: 100%;
    max-width: none !important;
    gap: 16px !important;
  }

  .estimate-step-card {
    grid-template-columns: 48px 320px minmax(0, 1fr) !important;
    min-height: 300px !important;
    height: 300px;
    border-radius: 16px;
  }

  .estimate-step-copy {
    padding-right: 16px;
  }

  .estimate-steps .estimate-step-copy p {
    max-width: 42ch;
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  .estimate-step-card > img,
  .estimate-step-card > .estimate-step-media {
    width: 100% !important;
    height: 300px !important;
    min-height: 300px !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }

  .estimate-step-card > .estimate-step-media > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* Match the estimate cards to the effective width of the Our Services cards. */
@media (min-width: 701px) and (max-width: 1024px) {
  .estimate-flow {
    width: 90% !important;
    max-width: none !important;
  }
}

@media (min-width: 1025px) and (max-width: 1400px) {
  .estimate-flow {
    width: calc(100% - 120px) !important;
    max-width: none !important;
  }
}

/* Give the shared logo, radio, and menu bar breathing room on tablets. */
@media (min-width: 701px) and (max-width: 1024px) {
  .mobile-bar-bg {
    top: 12px !important;
    left: -18px !important;
    right: 12px !important;
    border-radius: 12px;
  }

  .mobile-logo {
    top: 12px !important;
  }

  .top-bar-right {
    top: 16px !important;
    left: 78px !important;
    right: 84px !important;
  }

  .hamburger {
    top: 16px !important;
    right: 24px !important;
  }

  .site-frame {
    top: 84px !important;
    height: calc(100vh - 84px) !important;
  }
}

@media (max-width: 700px) {
  .estimate-flow {
    width: calc(100% - 36px);
    margin-top: 32px;
  }

  .estimate-step-card {
    grid-template-columns: 40px minmax(0, 1fr) 76px;
  }

  .estimate-step-number {
    font-size: 61px;
  }

  .estimate-step-card > img {
    min-height: 170px;
  }

  .estimate-panel {
    padding: 20px 14px;
  }

  .estimate-product-grid,
  .estimate-contact-grid {
    grid-template-columns: 1fr;
  }

  .estimate-summary {
    grid-template-columns: 1fr auto;
  }

  .estimate-summary strong {
    grid-column: 1 / -1;
    grid-row: 2;
    white-space: normal;
  }

  .estimate-submit-row {
    flex-direction: column-reverse;
    gap: 8px;
  }

  .estimate-form-status {
    text-align: center;
  }
}

/* iOS/Safari: keep the complete shell bar above the iframe and below the notch. */
@media (max-width: 1024px) {
  body.shell-page .mobile-bar-bg {
    display: block !important;
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    height: calc(60px + env(safe-area-inset-top, 0px)) !important;
    z-index: 100000 !important;
  }

  body.shell-page .mobile-logo {
    display: flex !important;
    position: fixed !important;
    top: env(safe-area-inset-top, 0px) !important;
    left: 12px !important;
    z-index: 100003 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.shell-page .top-bar-right {
    display: flex !important;
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 4px) !important;
    z-index: 100002 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.shell-page .radio-player {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.shell-page .hamburger {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 4px) !important;
    right: 12px !important;
    z-index: 100003 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.shell-page .site-frame {
    top: calc(60px + env(safe-area-inset-top, 0px)) !important;
    height: calc(100dvh - 60px - env(safe-area-inset-top, 0px)) !important;
  }

  body.shell-page .fullscreen-menu {
    padding-top: calc(72px + env(safe-area-inset-top, 0px)) !important;
  }
}

@media (max-width: 430px) {
  .estimate-flow {
    width: calc(100% - 28px);
  }

  .estimate-step-card {
    grid-template-columns: 34px minmax(0, 1fr) 64px;
  }

  .estimate-step-number {
    padding-top: 8px;
    font-size: 51px;
  }

  .estimate-step-copy {
    padding: 14px 9px 12px;
  }

  .estimate-step-copy p {
    font-size: 9px;
  }

  .estimate-step-card > img {
    min-height: 180px;
  }

  .estimate-product {
    grid-template-columns: 52px minmax(0, 1fr) auto 30px;
    gap: 8px;
  }

  .estimate-product-image {
    width: 52px;
    height: 58px;
  }
}

/* Estimate flow sizing and type scale requested for desktop/laptop. */
.estimate-flow p {
  font-size: 18px !important;
  line-height: 1.45 !important;
}

.estimate-step-copy h3 {
  font-size: 22px !important;
}

@media (min-width: 1601px) {
  .estimate-flow {
    width: 80% !important;
    max-width: none !important;
  }
}

@media (min-width: 1025px) and (max-width: 1600px) {
  .estimate-flow {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Desktop estimate section: keep the three-card group at 85% of the viewport. */
@media (min-width: 1025px) {
  .estimate-flow {
    width: 85vw !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Larger calculator cards for improved readability. */
.estimate-product {
  grid-template-columns: 90px minmax(0, 1fr) auto 42px;
  gap: 14px;
  padding: 12px;
}

.estimate-product-image {
  width: 90px;
  height: 86px;
}

.estimate-product-info strong {
  font-size: 16px;
}

.estimate-product-info small {
  font-size: 13px;
  line-height: 1.35;
}

.estimate-product-price {
  font-size: 16px;
}

.estimate-product-action {
  width: 42px;
  height: 42px;
  font-size: 28px;
}

.estimate-product.is-selected .estimate-product-action::before {
  font-size: 24px;
}

.estimate-summary span,
.estimate-summary strong {
  font-size: 13px;
}

.estimate-summary b {
  font-size: 24px;
}

@media (max-width: 430px) {
  .estimate-product {
    grid-template-columns: 68px minmax(0, 1fr) auto 36px;
    gap: 10px;
  }

  .estimate-product-image {
    width: 68px;
    height: 68px;
  }

  .estimate-product-info strong {
    font-size: 14px;
  }

  .estimate-product-info small {
    font-size: 12px;
  }

  .estimate-product-price {
    font-size: 14px;
  }

  .estimate-product-action {
    width: 36px;
    height: 36px;
  }
}

/* Keep the plus/check glyph optically centered inside its control. */
.estimate-product-action {
  align-self: center;
  justify-self: center;
  padding: 0;
  text-align: center;
  font-family: Arial, sans-serif;
  font-weight: 400;
  line-height: 1;
}

.estimate-product.is-selected .estimate-product-action::before {
  line-height: 1;
}

.estimate-contact-grid input::placeholder,
.estimate-contact-grid textarea::placeholder {
  color: rgba(218,243,252,.78);
  opacity: 1;
}

.estimate-contact-grid input,
.estimate-contact-grid textarea {
  font-size: 17px !important;
}

.estimate-contact-grid input::placeholder,
.estimate-contact-grid textarea::placeholder {
  font-size: 17px;
}

/* Match every estimate CTA and product control to the hero button. */
.estimate-flow .liquid-btn {
  border-radius: 50px;
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .3s ease;
}

.estimate-flow .estimate-trigger,
.estimate-flow .estimate-submit {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.estimate-flow .estimate-product-action {
  border-radius: 7px;
  border-width: 1px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* The liquid wave uses ::before; keep the selected check on ::after. */
.estimate-product.is-selected .estimate-product-action::before {
  content: '';
  font-size: 0;
}

.estimate-product.is-selected .estimate-product-action::after {
  content: "✓";
  position: relative;
  z-index: 2;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}

.estimate-step-card {
  min-height: 220px;
}

.estimate-step-card > img {
  min-height: 220px;
  object-fit: cover;
  object-position: center;
  background: #0a2534;
  transform: scale(1.06);
  transform-origin: center;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), scale .22s ease;
  will-change: transform;
}

.estimate-step-card:hover > img,
.estimate-step-card:focus-within > img {
  transform: scale(1.06);
}

/* Remove the old hero-to-content fade that created a light strip below
   the three estimate cards. */
body.frame-page.home-page .hero::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

.estimate-step-copy {
  padding-bottom: 24px;
}

.estimate-flow .estimate-trigger,
.estimate-flow .estimate-submit {
  text-transform: uppercase;
}

.estimate-flow .estimate-trigger {
  margin-top: 24px;
  font-size: 14px !important;
}

.estimate-flow .estimate-submit {
  font-size: 14px !important;
}

.estimate-flow {
  margin-top: -250px;
  margin-bottom: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
  isolation: isolate !important;
}

.estimate-flow::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  width: auto;
  transform: none;
  pointer-events: none;
  background: transparent !important;
}

.estimate-flow > * {
  position: relative;
  z-index: 1;
}

/* Keep the estimate heading flush with the bottom edge of the hero image. */
body.frame-page.home-page main#app > section.estimate-flow {
  margin-top: -280px !important;
}

body.shell-page::after {
  content: none !important;
  display: none !important;
}

.shell-page .site-frame {
  z-index: 1;
}

body.frame-page.home-page .portfolio-carousel {
  background: transparent !important;
}

.estimate-close {
  display: block;
  margin: 22px auto 0;
  padding: 7px 18px;
  border: 1px solid rgba(180,224,236,.28);
  border-radius: 50px;
  color: rgba(220,245,250,.62);
  background: rgba(1,18,29,.28);
  font: 600 10px/1.2 'Cairo', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  opacity: .8;
  transition: opacity .25s ease, border-color .25s ease, color .25s ease;
}

.estimate-close:hover,
.estimate-close:focus-visible {
  border-color: rgba(117,220,255,.62);
  color: #eafaff;
  opacity: 1;
  outline: none;
}

@media (min-width: 701px) {
  .estimate-flow-heading {
    max-width: none;
  }

  .estimate-flow-heading h2 {
    font-size: clamp(24px, 3vw, 40px);
    white-space: nowrap;
  }
}

.estimate-flow-heading p,
.estimate-step-copy p {
  font-size: clamp(13px, 1.2vw, 15px) !important;
  line-height: 1.8 !important;
}

.estimate-step-copy p {
  margin-top: 8px;
}

/* Precisely center the plus/check glyph inside the rounded product control. */
.estimate-product-action {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 0 !important;
  line-height: 1;
}

.estimate-product-action::after {
  content: "+";
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
}

.estimate-product.is-selected .estimate-product-action::after {
  content: "✓";
  font-size: 24px;
  font-weight: 900;
}

@media (max-width: 430px) {
  .estimate-product-action::after {
    font-size: 24px;
  }

  .estimate-product.is-selected .estimate-product-action::after {
    font-size: 21px;
  }
}

/* Stack the product price and add control in the card's right corners. */
.estimate-product {
  grid-template-columns: 90px minmax(0, 1fr);
  padding-right: 76px;
}

.estimate-product-price {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  padding: 0;
}

.estimate-flow .estimate-product-action {
  position: absolute;
  inset: auto 7px 7px auto !important;
  left: auto !important;
  right: 7px !important;
  bottom: 7px !important;
  z-index: 3;
  width: 34px;
  height: 34px;
}

.estimate-product-action::after {
  font-size: 22px;
}

@media (max-width: 430px) {
  .estimate-product {
    grid-template-columns: 68px minmax(0, 1fr);
    padding-right: 58px;
  }

  .estimate-product-price {
    top: 11px;
    right: 11px;
  }

  .estimate-flow .estimate-product-action {
    inset: auto 6px 6px auto !important;
    left: auto !important;
    right: 6px !important;
    bottom: 6px !important;
    width: 32px;
    height: 32px;
  }

  .estimate-product-action::after {
    font-size: 21px;
  }
}

/* Match estimate contact fields to the hero paragraph scale and give them
   a little more vertical breathing room. */
.estimate-contact-grid input,
.estimate-contact-grid textarea {
  font-size: clamp(13px, 1.2vw, 15px) !important;
}

.estimate-contact-grid input::placeholder,
.estimate-contact-grid textarea::placeholder {
  font-size: clamp(13px, 1.2vw, 15px) !important;
}

.estimate-contact-grid input {
  height: 44px !important;
  min-height: 44px;
}

.estimate-contact-grid textarea {
  min-height: 116px;
}

.hero-cta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-cta-row .estimate-hero-trigger {
  border: 1px solid rgba(0, 195, 215, 0.78);
  background: transparent;
  color: #dffcff;
  box-shadow: inset 0 0 0 1px rgba(0, 195, 215, 0.12);
}

.hero-cta-row .estimate-hero-trigger:hover,
.hero-cta-row .estimate-hero-trigger:focus-visible {
  background: rgba(0, 195, 215, 0.12);
  border-color: rgba(112, 239, 248, 0.98);
  box-shadow: 0 0 22px rgba(0, 195, 215, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

@media (max-width: 520px) {
  .hero-cta-row {
    gap: 10px;
  }

  .hero-cta-row .btn {
    padding-left: 22px;
    padding-right: 22px;
  }
}

.estimate-steps {
  gap: 24px;
}

.estimate-step-card > img {
  min-height: 220px;
}

@media (max-width: 700px) {
  .estimate-step-card {
    grid-template-columns: 40px minmax(0, 1fr) 96px;
  }

  .estimate-step-card {
    min-height: 240px;
  }

  .estimate-step-card > img {
    min-height: 240px;
  }
}

@media (max-width: 430px) {
  .estimate-step-card {
    grid-template-columns: 34px minmax(0, 1fr) 84px;
    min-height: 250px;
  }

  .estimate-step-card > img {
    min-height: 250px;
  }
}

/* Give the estimate artwork more room on desktop-sized layouts only. */
@media (min-width: 1401px) {
  .estimate-step-card {
    grid-template-columns: 48px minmax(0, 1fr) 170px;
  }
}

@media (min-width: 1025px) and (max-width: 1400px) {
  .estimate-step-card {
    grid-template-columns: 48px 280px minmax(0, 1fr) !important;
  }
}

/* Keep estimate cards stacked on laptop-sized desktop viewports so the copy
   never gets squeezed into a narrow column. */
@media (min-width: 1401px) and (max-width: 1600px) {
  .estimate-steps {
    grid-template-columns: 1fr;
    max-width: 1180px;
    margin: 0 auto;
  }
}

/* Laptop estimate cards: let the copy use the open middle area while
   widening the artwork toward the center of each card. */
@media (min-width: 701px) and (max-width: 1600px) {
  .estimate-step-card {
    grid-template-columns: 48px minmax(0, 1fr) 200px !important;
  }

  .estimate-step-copy p,
  .estimate-steps .estimate-step-copy p {
    max-width: 56ch !important;
  }
}

/* Estimate card layout: image first, then the existing copy and CTA.
   The typography and responsive outer grid remain unchanged; only the card
   flow follows the supplied visual reference. */
.estimate-step-card {
  display: flex !important;
  flex-direction: column;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  height: auto !important;
  min-height: 0 !important;
}

.estimate-step-number {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 6;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(87, 211, 255, .48);
  border-radius: 50%;
  background: rgba(0, 195, 215, .18);
  color: rgba(0, 195, 215, .95);
  font-size: 27px;
  line-height: 1;
  text-shadow: 0 0 12px rgba(93, 215, 255, .22);
}

.estimate-step-card > .estimate-step-media {
  order: 1;
  flex: 0 0 auto;
  width: 100% !important;
  height: clamp(170px, 14vw, 220px) !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
}

.estimate-step-card > .estimate-step-media > img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

.estimate-step-copy {
  order: 2;
  flex: 1 1 auto;
  padding: 20px 24px 24px;
}

.estimate-step-copy p,
.estimate-steps .estimate-step-copy p {
  max-width: 56ch !important;
}

.estimate-trigger {
  margin-top: 18px;
}

@media (max-width: 700px) {
  .estimate-step-number {
    top: 12px;
    left: 12px;
    width: 46px;
    height: 46px;
    font-size: 24px;
  }

  .estimate-step-card > .estimate-step-media {
    height: 180px !important;
  }

  .estimate-step-copy {
    padding: 18px 18px 20px;
  }
}

/* Preserve the supplied estimate images' native 430:342 proportions instead
   of cropping them into a fixed-height media slot. */
.estimate-step-card > .estimate-step-media,
.estimate-step-card > .estimate-step-media > img {
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
}

.estimate-step-card > .estimate-step-media > img {
  object-fit: contain;
}

/* Icon-led process layout inspired by the supplied reference. */
.estimate-step-card {
  overflow: visible;
  align-items: center;
  text-align: center;
  padding: 30px 20px 34px;
  background: linear-gradient(145deg, rgba(4,25,38,.96), rgba(7,43,59,.88));
}

.estimate-step-card:nth-child(1) {
  background:
    linear-gradient(45deg, transparent 0 80%, rgba(167, 62, 0, .84) 80% 100%),
    linear-gradient(145deg, rgba(218, 112, 8, .97), rgba(187, 82, 5, .94));
}

.estimate-step-card:nth-child(2) {
  background:
    linear-gradient(45deg, transparent 0 80%, rgba(28, 65, 23, .84) 80% 100%),
    linear-gradient(145deg, rgba(48, 113, 46, .97), rgba(35, 84, 37, .94));
}

.estimate-step-card:nth-child(3) {
  background:
    linear-gradient(45deg, transparent 0 80%, rgba(17, 59, 91, .84) 80% 100%),
    linear-gradient(145deg, rgba(29, 116, 151, .97), rgba(19, 79, 111, .94));
}

.estimate-step-card::before {
  content: "";
  position: absolute;
  top: 82px;
  left: calc(100% + 8px);
  width: 16px;
  height: 2px;
  z-index: 0;
  background: linear-gradient(90deg, rgba(0,195,215,.72), rgba(93,215,255,.18));
  box-shadow: 0 0 9px rgba(0,195,215,.42);
}

.estimate-step-card:last-child::before {
  display: none;
}

.estimate-step-icon {
  order: 1;
  position: relative;
  z-index: 2;
  width: 98px;
  height: 98px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(93,215,255,.34);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(4,12,22,.98), rgba(2,8,16,1));
  box-shadow:
    0 0 22px rgba(0,195,215,.14),
    inset 0 0 18px rgba(93,215,255,.08);
  transform-origin: center;
  transition: transform .65s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

.estimate-step-card:nth-child(1) .estimate-step-icon {
  background: linear-gradient(145deg, rgba(218, 112, 8, .97), rgba(187, 82, 5, .94));
  box-shadow: none;
}

.estimate-step-card:nth-child(2) .estimate-step-icon {
  background: linear-gradient(145deg, rgba(48, 113, 46, .97), rgba(35, 84, 37, .94));
  box-shadow: none;
}

.estimate-step-card:nth-child(3) .estimate-step-icon {
  background: linear-gradient(145deg, rgba(29, 116, 151, .97), rgba(19, 79, 111, .94));
  box-shadow: none;
}

body.frame-page.home-page .estimate-step-icon {
  border-color: rgba(255, 255, 255, .42);
}

.estimate-step-card:hover .estimate-step-icon,
.estimate-step-card:focus-within .estimate-step-icon {
  transform: scale(1.06);
}

.estimate-step-icon::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid rgba(93,215,255,.12);
  border-radius: 22px;
  pointer-events: none;
}

body.frame-page.home-page .estimate-step-icon::after {
  border-color: rgba(255, 255, 255, .24);
}

.estimate-step-icon img {
  width: 46px;
  height: 46px;
  display: block;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .96;
  transition: filter .24s ease;
}

.estimate-step-card:hover .estimate-step-icon img,
.estimate-step-card:focus-within .estimate-step-icon img {
  filter: brightness(0) invert(1);
}

.estimate-step-number {
  position: absolute;
  top: 21px;
  left: auto;
  right: 18px;
  z-index: 6;
  order: 2;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(93,215,255,.22);
  font-family: 'Cairo', sans-serif;
  font-size: 50px;
  font-weight: 300;
  line-height: .78;
  letter-spacing: .01em;
  text-shadow: 0 0 18px rgba(93,215,255,.08);
}

.estimate-step-card:hover .estimate-step-number,
.estimate-step-card:focus-within .estimate-step-number {
  color: rgba(255,255,255,.72);
  text-shadow: 0 0 22px rgba(255,255,255,.24);
}

.estimate-step-copy {
  order: 3;
  width: 100%;
  align-items: center;
  padding: 12px 4px 0;
}

.estimate-step-copy h3 {
  margin-bottom: 8px;
}

.estimate-step-copy p,
.estimate-steps .estimate-step-copy p {
  max-width: 34ch !important;
  font-size: 16px !important;
}

.estimate-trigger {
  margin-top: 18px;
}

body.frame-page.home-page .estimate-step-card .estimate-trigger {
  background: linear-gradient(145deg, rgba(4, 12, 22, .98), rgba(2, 8, 16, 1));
  border: 0;
  color: #ffffff;
  padding-left: 20px;
  padding-right: 20px;
}

body.frame-page.home-page .estimate-step-card .estimate-trigger::before {
  background: rgba(255, 255, 255, .07);
  background-image: none;
  animation: none;
}

body.frame-page.home-page .estimate-step-card .estimate-trigger:hover {
  box-shadow: 0 0 16px rgba(255, 255, 255, .08), 0 6px 20px rgba(0, 0, 0, .3);
  border-color: transparent;
}

body.frame-page.home-page .estimate-step-card,
body.frame-page.home-page .estimate-step-card:hover,
body.frame-page.home-page .estimate-step-card:focus-within {
  border: 0;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .36);
}

@media (min-width: 701px) and (max-width: 1600px) {
  .estimate-step-card::before {
    display: none;
  }

  .estimate-step-card {
    padding: 32px 28px 36px;
  }

  .estimate-step-copy p,
  .estimate-steps .estimate-step-copy p {
    max-width: 56ch !important;
  }
}

@media (max-width: 700px) {
  .estimate-step-card::before {
    display: none;
  }

  .estimate-step-card {
    padding: 26px 16px 32px;
  }

  .estimate-step-number {
    top: 19px;
    left: auto;
    right: 16px;
    font-size: 50px;
  }

  .estimate-step-icon {
    width: 84px;
    height: 84px;
  }

  .estimate-step-icon img {
    width: 36px;
    height: 36px;
  }

  .estimate-step-copy {
    padding: 12px 0 0;
  }
}

/* About source content sits above the existing three-column portfolio grid. */
.about-source-intro {
  max-width: 980px;
  margin-bottom: 34px;
}

.about-founder {
  display: grid;
  grid-template-columns: minmax(220px, 0.68fr) minmax(0, 1.32fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
  max-width: 1120px;
  margin: 0 0 72px;
  padding: clamp(22px, 3vw, 38px);
  border: 1px solid rgba(93, 215, 255, 0.16);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(12, 50, 76, 0.58), rgba(5, 20, 34, 0.74));
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.about-founder-image-wrap {
  overflow: hidden;
  border: 1px solid rgba(93, 215, 255, 0.3);
  border-radius: 16px;
  box-shadow: 0 0 22px rgba(93, 215, 255, 0.16), 0 14px 34px rgba(0, 0, 0, 0.34);
}

.about-founder-image-wrap img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: scale .22s ease;
}

.about-founder-copy {
  min-width: 0;
}

.about-founder-kicker {
  display: inline-block;
  margin-bottom: 8px;
  color: rgba(93, 215, 255, 0.84);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.about-founder-copy h2 {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.96);
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.08;
}

.about-founder-copy p {
  margin: 0 0 15px;
  color: #abcbde;
  font-size: 15px;
  line-height: 1.8;
}

.about-founder-highlights {
  display: grid;
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.about-founder-highlights li {
  display: grid;
  grid-template-columns: minmax(125px, 0.34fr) minmax(0, 0.66fr);
  gap: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(93, 215, 255, 0.14);
  color: #abcbde;
  font-size: 13px;
  line-height: 1.55;
}

.about-founder-highlights strong {
  color: rgba(255, 255, 255, 0.94);
  font-weight: 700;
}

@media (max-width: 768px) {
  .about-founder {
    grid-template-columns: 1fr;
    gap: 26px;
    margin-bottom: 48px;
  }

  .about-founder-image-wrap {
    max-width: 360px;
    margin: 0 auto;
  }

  .about-founder-highlights li {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}

/* Give the Our Services columns a little more breathing room. */
.services .cards {
  padding-left: 80px;
  padding-right: 80px;
  column-gap: 32px;
}

@media (min-width: 1101px) {
  .services .cards {
    padding-left: clamp(72px, 6vw, 96px) !important;
    padding-right: clamp(72px, 6vw, 96px) !important;
    column-gap: clamp(44px, 3.5vw, 56px) !important;
  }
}

@media (min-width: 769px) and (max-width: 1100px) {
  .services .cards {
    column-gap: 28px;
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 768px) {
  .services .cards {
    column-gap: 20px;
    padding-left: 0;
    padding-right: 0;
  }
}

/* Subtle image zoom for the Our Services cards. */
.services .service-card .card-img-wrap {
  overflow: hidden;
}

/* Tie the service artwork into the underwater palette while keeping the
   original image color available on interaction. */
.services .service-card .service-card-image-link {
  display: block;
  width: 100%;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.services .service-card .card-img-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-color: transparent;
  background-image: none;
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 0%;
  mix-blend-mode: normal;
  opacity: 0;
  transition: background-size 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}

.services .service-card h3 {
  font-size: 19px;
  margin: 16px 4px 9px;
  text-align: center;
}

.services .service-card p {
  font-size: 16px !important;
  line-height: 1.75;
  margin: 0 8px 20px;
  text-align: center;
}

.services .service-card .btn {
  align-self: center;
  margin: auto 0 0;
}

.services .service-card img {
  filter: saturate(1) contrast(1);
  transition:
    transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    filter 0.42s ease !important;
}

.services .service-card:hover img,
.services .service-card:focus-within img {
  transform: scale(1.07) !important;
  filter: saturate(1) contrast(1) !important;
}

.services .service-card:hover .card-img-wrap::before,
.services .service-card:focus-within .card-img-wrap::before {
  background-size: 100% 0%;
}

.services .service-card .card-img-wrap .service-card-color-image {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none !important;
  clip-path: polygon(
    0 100%, 8% 100%, 16% 100%, 24% 100%, 32% 100%, 40% 100%,
    48% 100%, 56% 100%, 64% 100%, 72% 100%, 80% 100%, 88% 100%,
    100% 100%, 100% 100%, 0 100%
  );
  transition: clip-path 1.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: clip-path;
}

.services .service-card:hover .card-img-wrap .service-card-color-image,
.services .service-card:focus-within .card-img-wrap .service-card-color-image {
  clip-path: polygon(
    0 3%, 8% 0%, 16% 2%, 24% 0%, 32% 3%, 40% 1%,
    48% 4%, 56% 1%, 64% 3%, 72% 0%, 80% 2%, 88% 0%,
    100% 3%, 100% 100%, 0 100%
  );
}

/* Keep the supplied search-plus mark crisp and white over the sharp image area. */
.services .service-card .card-img-wrap .service-card-search-icon {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: block;
  width: 56px;
  height: 56px;
  margin: auto;
  object-fit: contain;
  filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.9)) !important;
  opacity: 1 !important;
  visibility: visible !important;
  mix-blend-mode: normal;
  transform: none !important;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.services .service-card:hover .card-img-wrap .service-card-search-icon,
.services .service-card:focus-within .card-img-wrap .service-card-search-icon {
  filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.9)) !important;
  transform: none !important;
}

/* The sharp image area gets its own boundary stroke. It follows the
   frame's 80px-to-0px retreat so the stroke expands with the clear area. */
.services .service-card .card-img-wrap::before {
  top: 80px;
  right: 80px;
  bottom: 80px;
  left: 80px;
  z-index: 5;
  opacity: 1;
  border: 1px solid rgba(196, 225, 229, 0.34);
  background-color: rgba(43, 179, 184, 0.82);
  mix-blend-mode: color;
  box-shadow: none;
  transition:
    top 1.35s cubic-bezier(0.22, 1, 0.36, 1),
    right 1.35s cubic-bezier(0.22, 1, 0.36, 1),
    bottom 1.35s cubic-bezier(0.22, 1, 0.36, 1),
    left 1.35s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.35s ease,
    border-color 0.35s ease;
}

.services .service-card:hover .card-img-wrap::before,
.services .service-card:focus-within .card-img-wrap::before {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(43, 179, 184, 0.82);
  border-color: rgba(43, 179, 184, 0.78);
  mix-blend-mode: color;
}

/* Glass frame that retreats to the image edges on hover. */
.services .service-card .card-img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border: 80px solid rgba(205, 235, 238, 0.28);
  box-sizing: border-box;
  background: transparent;
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  box-shadow: none;
  backdrop-filter: blur(1px) grayscale(0.78) saturate(0.3) brightness(1.12);
  -webkit-backdrop-filter: blur(1px) grayscale(0.78) saturate(0.3) brightness(1.12);
  opacity: 1;
  transform: none;
  animation: none !important;
  transition:
    border-width 1.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 1.35s ease;
}

.services .service-card:hover .card-img-wrap::after,
.services .service-card:focus-within .card-img-wrap::after {
  border-width: 0;
  opacity: 1;
  box-shadow: none;
}

/* Slimmer 50px frame for laptop-sized desktop screens. */
@media (min-width: 1025px) and (max-width: 1600px) {
  .services .service-card .card-img-wrap::before {
    top: 50px;
    right: 50px;
    bottom: 50px;
    left: 50px;
  }

  .services .service-card .card-img-wrap::after {
    border-width: 50px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .services .service-card img,
  .services .service-card:hover img,
  .services .service-card:focus-within img {
    transform: none !important;
    transition: none !important;
  }

  .services .service-card .card-img-wrap::before {
    transition: none;
  }

  .services .service-card .card-img-wrap .service-card-color-image {
    transition: none;
  }
}

/* Use a geometric checkmark so the icon itself is centered, not just its
   font box. */
.estimate-product.is-selected .estimate-product-action::after {
  content: "";
  position: absolute;
  inset: auto;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 12px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  border-radius: 1px;
  background: transparent;
  transform: translate(-50%, -50%) rotate(45deg);
  transform-origin: center;
}

@media (max-width: 430px) {
  .estimate-product.is-selected .estimate-product-action::after {
    width: 6px;
    height: 11px;
    border-width: 0 2px 2px 0;
  }
}

/* About page layout matched to the compact reference composition. */
.about-page .uid-page-sub-wrap {
  display: none;
}

.about-page .about-hero {
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 52px 5% 80px;
}

.about-page .about-hero h1 {
  margin-bottom: 30px;
  text-align: center;
  font-size: clamp(32px, 4vw, 42px);
  line-height: 1.1;
}

.about-page .about-source-intro {
  width: calc(50% - clamp(12px, 2vw, 24px));
  max-width: none;
  margin: 0 0 36px;
  text-align: center;
}

.about-page .about-source-intro p {
  margin-bottom: 13px;
  font-size: clamp(13px, 1.2vw, 15px);
  line-height: 1.8;
}

.about-page .about-founder {
  grid-template-columns:
    calc(12.5% - 3px + clamp(6px, 1.25vw, 18px))
    minmax(0, 1fr);
  gap: var(--card-gap);
  max-width: none;
  margin: 0 auto 72px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.about-page .about-founder-image-wrap {
  width: 100%;
  height: auto;
  margin: 0;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
}

.about-page .about-founder-portrait-column {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}

.about-page .about-founder-cta {
  align-self: flex-start;
}

.about-page .about-founder-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-page .about-founder-kicker {
  margin: 2px 0 8px;
  font-size: 12px;
}

.about-page .about-founder-copy h2 {
  margin-bottom: 16px;
  font-size: clamp(34px, 4vw, 42px);
  line-height: 1;
}

.about-page .about-founder-copy {
  margin-top: -10px;
}

.about-page .about-founder-copy p {
  margin-bottom: 12px;
  font-size: clamp(13px, 1.2vw, 15px);
  line-height: 1.8;
}

.calendly-booking-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 136px;
  box-sizing: border-box;
  padding: 12px 26px;
  border: 1px solid #2bb3b8;
  border-radius: 999px;
  background: #2bb3b8;
  color: #fff;
  -webkit-text-fill-color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  transition: background 180ms ease, border-color 180ms ease;
}

.calendly-booking-cta:hover,
.calendly-booking-cta:focus-visible {
  background: #239da2;
  border-color: #239da2;
  color: #fff;
  -webkit-text-fill-color: #fff;
}

.calendly-booking-cta:focus-visible {
  outline: 3px solid #d7c7ff;
  outline-offset: 4px;
}

body.frame-page.about-page .about-founder-cta,
body.frame-page.about-page .about-founder-cta:visited {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

body.frame-page.about-page .about-founder-cta:hover,
body.frame-page.about-page .about-founder-cta:focus-visible {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.about-page .about-card p {
  font-size: clamp(13px, 1.2vw, 15px);
  line-height: 1.8;
}

.about-page .about-founder-highlights {
  grid-column: 1 / -1;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 20px;
}

.about-page .about-founder-highlights li {
  display: block;
  min-width: 0;
  padding: 12px 10px;
  border: 1px solid rgba(93, 215, 255, 0.17);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(12, 50, 76, 0.58), rgba(5, 20, 34, 0.72));
  font-size: clamp(13px, 1.2vw, 15px);
  line-height: 1.8;
}

.about-page .about-founder-highlights strong,
.about-page .about-founder-highlights span {
  display: block;
}

.about-page .about-founder-highlights strong {
  margin-bottom: 5px;
  font-size: clamp(14px, 1.4vw, 17px);
  font-weight: 800;
  line-height: 1.25;
}

.about-page .about-founder-highlights span {
  color: #abcbde;
}

@media (max-width: 768px) {
  .about-page .about-hero {
    width: auto;
    padding: 40px 18px 64px;
  }

  .about-page .about-hero h1 {
    font-size: clamp(28px, 8vw, 38px);
    text-align: left;
  }

  .about-page .about-source-intro {
    text-align: left;
  }

  .about-page .about-source-intro {
    width: 100%;
    margin-bottom: 36px;
  }

  .about-page .about-founder {
    grid-template-columns: 1fr;
    gap: var(--card-gap);
    max-width: 480px;
  }

  .about-page .about-founder-copy {
    margin-top: 0;
  }

  .about-page .about-founder-image-wrap {
    width: 50%;
    max-width: none;
    height: auto;
    margin: 0;
    aspect-ratio: 1 / 1;
  }

  .about-page .about-founder-portrait-column {
    width: 100%;
    align-items: stretch;
    margin: 0 auto;
  }

  .about-page .about-founder-highlights {
    grid-template-columns: 1fr;
  }
}

.about-page .about-card-image-link {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  order: 0;
  overflow: hidden;
  border: 1px solid rgba(93, 215, 255, 0.28);
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(93, 215, 255, 0.12), 0 4px 18px rgba(0, 0, 0, 0.4);
  line-height: 0;
}

.about-page .about-card-image-link img {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: cover;
  transition: transform 220ms ease;
}

.about-page .about-card-image-link:hover img,
.about-page .about-card-image-link:focus-visible img {
  transform: scale(1.012);
}

.about-page .about-card-image-link:focus-visible {
  outline: 2px solid rgba(93, 215, 255, 0.9);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .about-page .about-card-image-link img {
    transition: none;
  }

  .about-page .about-card-image-link:hover img,
  .about-page .about-card-image-link:focus-visible img {
    transform: none;
  }
}

.about-page .about-source-intro {
  width: calc(50% - clamp(12px, 2vw, 24px));
  max-width: none;
}

.about-page .about-source-intro p {
  margin-bottom: 10px;
  line-height: 1.55;
}

@media (max-width: 768px) {
  .about-page .about-source-intro {
    width: 100%;
    max-width: 100%;
  }
}

@media (min-width: 769px) {
  .about-page .about-hero {
    padding-top: 122px;
  }

  .about-page .about-hero h1 {
    width: 62%;
    text-align: left;
  }

  .about-page .about-source-intro {
    width: calc(50% - clamp(12px, 2vw, 24px));
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
  }
}

/* Keep the home blog block aligned with the same content frame as Our Experience. */
body.frame-page.home-page .hero-blog-teasers,
.home-page .hero-blog-teasers {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  padding-left: 60px !important;
  padding-right: 60px !important;
}

@media (max-width: 1024px) {
  body.frame-page.home-page .hero-blog-teasers,
  .home-page .hero-blog-teasers {
    padding-left: clamp(18px, 4vw, 36px) !important;
    padding-right: clamp(18px, 4vw, 36px) !important;
  }
}

@media (max-width: 768px) {
  body.frame-page.home-page .hero-blog-teasers,
  .home-page .hero-blog-teasers {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

@media (min-width: 769px) {
  body.frame-page.home-page .hero-blog-teasers,
  .home-page .hero-blog-teasers {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.frame-page.home-page .hero-blog-cards,
  .home-page .hero-blog-cards {
    width: 79.5% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: translateX(4px);
  }
}

body.frame-page.home-page .hero-blog-teasers h2,
.home-page .hero-blog-teasers h2 {
  text-align: center !important;
}

/* Keep the hero card above the estimate section when tablet flow overlaps. */
body.frame-page.home-page .hero {
  position: relative !important;
  z-index: 1000 !important;
  isolation: isolate !important;
  overflow: visible !important;
}

body.frame-page.home-page .hero-copy.glass {
  position: relative !important;
  z-index: 2147483000 !important;
}

body.frame-page.home-page .estimate-flow {
  position: relative !important;
  z-index: 1 !important;
}

body.frame-page.home-page main#app > section#home.hero {
  z-index: 10 !important;
}

body.frame-page.home-page main#app > section.estimate-flow {
  z-index: 100 !important;
}

@media (max-width: 1024px) {
  body.frame-page.home-page .hero-copy.glass {
    background: linear-gradient(145deg, rgba(12, 50, 76, 0.98), rgba(5, 20, 34, 0.995)) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
  body.frame-page.home-page .estimate-flow {
    margin-top: -430px !important;
  }
}

@media (max-width: 768px) {
  body.frame-page.home-page main#app > section#home.hero {
    position: relative !important;
    z-index: 2147483000 !important;
    isolation: isolate !important;
    overflow: visible !important;
  }

  body.frame-page.home-page section#home .hero-copy.glass,
  body.frame-page.home-page .hero-copy.glass {
    position: relative !important;
    z-index: 2147483646 !important;
    isolation: isolate !important;
    overflow: visible !important;
  }

  body.frame-page.home-page main#app > section.estimate-flow {
    z-index: 0 !important;
  }
}

@media (max-width: 1024px) {
  body.frame-page.home-page main#app > section#home.hero {
    position: relative !important;
    z-index: 2147483000 !important;
    isolation: isolate !important;
    overflow: visible !important;
  }

  body.frame-page.home-page main#app > section:not(#home).estimate-flow {
    position: relative !important;
    z-index: 0 !important;
    margin-top: 32px !important;
  }
}

/* Final responsive override: keep the estimate heading on the hero edge. */
body.frame-page.home-page main#app > section:not(#home).estimate-flow {
  margin-top: -280px !important;
}

/* On tablet/mobile, keep the estimate cards below the hero card instead of
   letting the taller hero layer cover the first card. */
@media (max-width: 1024px) {
  body.frame-page.home-page main#app > section:not(#home).estimate-flow {
    margin-top: 20px !important;
  }
}

/* Home testimonials carousel */
.home-testimonials {
  position: relative;
  z-index: 30;
  width: 75%;
  box-sizing: border-box;
  padding: 0 0 74px;
  margin: clamp(42px, 5vw, 82px) auto 0;
  scroll-margin-top: 18px;
  color: #eafaff;
}

/* One uninterrupted parallax backdrop for Testimonials and Clients & Partners. */
.home-social-proof-bg {
  position: relative;
  display: flow-root;
  width: 100%;
  background:
    linear-gradient(135deg, rgba(0, 132, 148, .68), rgba(0, 68, 82, .8)),
    url("../images/home-sections-parallax.webp") center / cover fixed no-repeat;
}

.clients-section {
  background: none;
}

@media (max-width: 767px), (prefers-reduced-motion: reduce) {
  .home-social-proof-bg {
    background-attachment: scroll;
  }
}

.testimonials-heading {
  max-width: 760px;
  margin: 0 auto 28px;
  text-align: center;
}

.testimonials-kicker {
  display: inline-block;
  margin-bottom: 9px;
  color: rgba(124, 245, 248, .82);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.testimonials-heading h2 {
  margin: 0;
  color: #f6fdff;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.08;
  font-weight: 900;
  text-shadow: 0 8px 28px rgba(0, 0, 0, .48);
}

.testimonials-heading p {
  margin: 12px auto 0;
  color: rgba(218, 243, 252, .72);
  font-size: 14px;
  line-height: 1.55;
}

.testimonials-viewport {
  overflow: hidden;
  padding: 42px 2px 14px;
}

.testimonials-track {
  display: flex;
  gap: 18px;
  align-items: stretch;
  transition: transform .46s cubic-bezier(.22, .8, .24, 1);
  will-change: transform;
}

.testimonial-card {
  position: relative;
  flex: 0 0 calc((100% - 36px) / 3);
  height: 380px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 20px 22px 32px;
  border: 1px solid rgba(93, 215, 255, .15);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(12, 50, 76, .70), rgba(5, 20, 34, .85));
  box-shadow: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: visible;
}

.testimonial-card::before {
  display: none;
}

.testimonial-person,
.testimonial-quote {
  position: relative;
  z-index: 1;
}

.testimonial-person {
  flex: 0 0 auto;
  padding-top: 64px;
  text-align: center;
}

.testimonial-person img {
  position: absolute;
  z-index: 3;
  top: -56px;
  left: 50%;
  display: block;
  width: 108px;
  height: 108px;
  margin: 0;
  border: 2px solid rgba(255, 255, 255, .68);
  border-radius: 50%;
  object-fit: cover;
  object-position: center center;
  box-shadow: 0 9px 24px rgba(0, 0, 0, .28);
  transform: translateX(-50%);
}

.testimonial-person h3 {
  margin: 0;
  color: #f5fdff;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.16;
  font-weight: 900;
}

.testimonial-person p {
  margin: 5px 0 0;
  color: rgba(220, 248, 255, .80);
  font-size: 12px;
  line-height: 1.25;
  font-weight: 700;
}

.testimonial-quote {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 18px;
  width: 67.2%;
  max-width: 67.2%;
  margin-right: auto;
  margin-left: auto;
  padding: 0 14px 10px 4px;
  overflow-y: hidden;
  color: rgba(239, 250, 255, .88);
  font-size: 15px;
  line-height: 1.55;
  font-style: italic;
  text-align: center;
  scrollbar-color: rgba(188, 242, 255, .92) rgba(4, 23, 40, .42);
  scrollbar-gutter: auto;
  scrollbar-width: auto;
}

.testimonial-quote-shell {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 84%;
  max-width: 84%;
  margin: 18px auto 0;
}

.testimonial-quote-shell .testimonial-quote {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding-left: 10%;
  padding-right: calc(10% + 14px);
}

.testimonial-quote--scroll {
  overflow-y: scroll;
  scrollbar-gutter: stable;
  scrollbar-width: none;
}

.testimonial-quote-shell .testimonial-quote--scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.testimonial-scrollbar {
  position: absolute;
  z-index: 4;
  right: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  border-radius: 999px;
  pointer-events: auto;
  cursor: pointer;
  touch-action: none;
  background: rgba(3, 20, 35, .42);
  box-shadow: inset 0 0 0 1px rgba(171, 237, 255, .10);
}

.testimonial-scrollbar-thumb {
  position: absolute;
  top: var(--testimonial-scroll-thumb-top, 0px);
  right: 0;
  display: block;
  width: 8px;
  height: var(--testimonial-scroll-thumb-height, 42px);
  border-radius: 999px;
  pointer-events: auto;
  cursor: grab;
  background: linear-gradient(180deg, rgba(133, 179, 190, .64), rgba(48, 116, 137, .60));
  box-shadow: 0 0 5px rgba(90, 190, 210, .18);
}

.testimonial-scrollbar:hover .testimonial-scrollbar-thumb,
.testimonial-scrollbar.is-dragging .testimonial-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(149, 195, 204, .72), rgba(56, 128, 148, .68));
}

.testimonial-scrollbar.is-dragging,
.testimonial-scrollbar.is-dragging .testimonial-scrollbar-thumb {
  cursor: grabbing;
}

.testimonial-quote::-webkit-scrollbar {
  width: 10px;
}

.testimonial-quote::-webkit-scrollbar-track {
  border-radius: 10px;
  background: rgba(3, 20, 35, .48);
}

.testimonial-quote::-webkit-scrollbar-thumb {
  min-height: 42px;
  border: 2px solid rgba(4, 24, 41, .28);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(213, 248, 255, .98), rgba(82, 190, 224, .86));
}

.testimonials-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 7px;
}

.testimonials-arrow {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #e7fbff;
  line-height: 1;
  cursor: pointer;
  transition: color .2s ease, filter .2s ease, opacity .2s ease;
}

.testimonials-arrow-icon {
  display: block;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  pointer-events: none;
}

.testimonials-arrow-icon--prev {
  transform: rotate(135deg);
}

.testimonials-arrow-icon--next {
  transform: rotate(-45deg);
}

.testimonials-arrow:hover:not(:disabled),
.testimonials-arrow:focus-visible {
  border-color: transparent;
  background: transparent;
  color: #a9f3ff;
  filter: drop-shadow(0 0 6px rgba(110, 235, 255, .72));
}

.testimonials-arrow:disabled {
  cursor: default;
  opacity: .32;
}

.testimonials-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.testimonials-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 1px solid rgba(176, 239, 255, .55);
  border-radius: 50%;
  background: rgba(176, 239, 255, .22);
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.testimonials-dot.is-active,
.testimonials-dot:hover,
.testimonials-dot:focus-visible {
  transform: scale(1.35);
  background: #9ceeff;
  box-shadow: 0 0 12px rgba(110, 235, 255, .75);
}

@media (max-width: 1100px) {
  .home-testimonials {
    width: 75%;
    padding-left: 0;
    padding-right: 0;
  }

  .testimonial-card {
    flex-basis: calc((100% - 18px) / 2);
  }
}

@media (max-width: 700px) {
  .home-testimonials {
    width: calc(100% - 36px);
    margin-top: 44px;
  }

  .testimonials-heading {
    margin-bottom: 22px;
  }

  .testimonials-heading p {
    font-size: 12px;
  }

  .testimonial-card {
    flex-basis: 100%;
    height: 380px;
    padding: 18px 18px 30px;
  }

  .testimonial-quote {
    font-size: 15px;
    line-height: 1.5;
  }
}

/* Extend the estimate section's dark surround across the hero background
   where the 75vw card group overlaps its lower edge. */
body.frame-page.home-page .hero-underwater-bg::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  height: 46% !important;
  min-height: 240px !important;
  z-index: 3 !important;
  pointer-events: none !important;
  background: linear-gradient(
    to bottom,
    rgba(1, 7, 12, 0) 0%,
    rgba(1, 7, 12, 0) 58%,
    rgba(1, 7, 12, 0.52) 82%,
    #01070c 100%
  ) !important;
}

/* Keep the full-width estimate backdrop above the hero background layer. */
body.frame-page.home-page main#app > section.estimate-flow {
  z-index: 1100 !important;
}

/* Match the site's primary background to the supplied dark reference swatch. */
body.frame-page.home-page,
body.frame-page.home-page .site-bg {
  background: transparent !important;
}

body.frame-page.home-page .estimate-flow::before {
  background: transparent !important;
}

body.frame-page.home-page .portfolio-carousel {
  background-color: transparent !important;
}

/* Keep the site content at a stable large-desktop width instead of stretching
   across ultra-wide screens. The fixed site background remains full viewport. */
@media (min-width: 1921px) {
  body.frame-page {
    width: 1920px !important;
    max-width: 1920px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.frame-page.home-page {
    overflow-x: visible !important;
  }

  body.frame-page.home-page .home-social-proof-bg {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc((1920px - 100vw) / 2) !important;
    margin-right: 0 !important;
  }

  body.frame-page.home-page .home-testimonials {
    width: 75% !important;
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.frame-page.home-page .clients-section {
    width: 100% !important;
    max-width: none !important;
  }

  body.frame-page.home-page .estimate-flow {
    width: 85% !important;
    max-width: none !important;
  }
}

/* Decorative fish and bubble effects are disabled site-wide. */
#fishCanvas,
.fish-canvas,
#bubbleLayer,
.bubble-layer,
.artlantic-bubbles,
.decor-fish,
.decor-bubbles,
.station-bubble {
  display: none !important;
}

/* Keep every page footer and copyright strip on the Home dark surface. */
body.frame-page .footer,
body.frame-page .site-footer,
body.frame-page .copyright {
  background: #020405 !important;
}

body.frame-page .footer,
body.frame-page .site-footer {
  border-top-color: rgba(145, 171, 181, 0.10) !important;
}

body.frame-page .copyright {
  border-top-color: rgba(145, 171, 181, 0.08) !important;
}

/* Keep the footer surface full-bleed even when the page content is narrower. */
body.frame-page .footer,
body.frame-page .site-footer,
body.frame-page .copyright {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* Home hero stacking: background < submarine < fish/bubbles < main card. */
body.frame-page.home-page #home.hero > .hero-decorations {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  z-index: 60 !important;
  pointer-events: none !important;
}

body.frame-page.home-page #home.hero .hero-decorations > .fish-canvas,
body.frame-page.home-page #home.hero .hero-decorations > #fishCanvas,
body.frame-page.home-page #home.hero .hero-decorations > .bubble-layer,
body.frame-page.home-page #home.hero .hero-decorations > #bubbleLayer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 60 !important;
  pointer-events: none !important;
}

body.frame-page.home-page #home.hero > .hero-orb {
  position: relative !important;
  z-index: 20 !important;
}

body.frame-page.home-page #home.hero > .hero-orb .hero-submarine {
  position: relative !important;
  z-index: 21 !important;
}

body.frame-page.home-page #home.hero > .hero-copy,
body.frame-page.home-page #home.hero > .hero-copy.glass {
  position: relative !important;
  z-index: 2147483647 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Keep the hero section/content width unchanged, but let its video background
   cover the complete viewport so no side gutters remain beside the video. */
body.frame-page.home-page #home.hero {
  overflow: visible !important;
}

body.frame-page.home-page #home.hero > .hero-underwater-bg {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  right: auto !important;
  width: 100vw !important;
  max-width: none !important;
  height: auto !important;
  transform: translateX(-50%) !important;
}

/* ===== NEW HOME HERO ===== */
.new-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(660px, calc(100svh - 10px), 840px);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: clamp(128px, 15vh, 168px) clamp(28px, 8vw, 144px) 74px;
  background: #02090f;
  border-bottom: 1px solid rgba(93, 215, 255, 0.12);
}

.new-hero-media,
.new-hero-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.new-hero-media {
  z-index: -3;
  background: #03121d;
}

.new-hero-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0.72;
  filter: saturate(0.9) contrast(1.04) brightness(0.78);
}

.new-hero-shade {
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(1, 7, 13, 0.97) 0%, rgba(1, 10, 17, 0.84) 36%, rgba(1, 7, 13, 0.28) 76%, rgba(1, 6, 11, 0.56) 100%),
    linear-gradient(0deg, rgba(1, 5, 9, 0.82) 0%, transparent 36%, rgba(1, 6, 12, 0.32) 100%);
}

.new-hero-grid {
  position: relative;
  z-index: 1;
  width: min(1260px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 0.34fr);
  gap: clamp(40px, 9vw, 150px);
  align-items: end;
}

.new-hero-copy {
  max-width: 780px;
}

.new-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  color: rgba(143, 225, 250, 0.82);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.new-hero-eyebrow span {
  width: 34px;
  height: 1px;
  background: #5dd7ff;
  box-shadow: 0 0 12px rgba(93, 215, 255, 0.8);
}

.new-hero h1 {
  max-width: 820px;
  color: #f7fbff;
  font-size: clamp(42px, 6vw, 88px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
  text-shadow: 0 10px 38px rgba(0, 0, 0, 0.48);
}

.new-hero h1 em {
  color: #91ddf7;
  font-style: normal;
}

.new-hero-lead {
  max-width: 570px;
  margin-top: 28px;
  color: rgba(213, 235, 245, 0.78);
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.75;
}

.new-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 36px;
}

.new-hero-primary,
.new-hero-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: 999px;
  padding: 0 23px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.new-hero-primary {
  gap: 12px;
  color: #031019;
  background: #8fe7fb;
  border: 1px solid #8fe7fb;
  box-shadow: 0 8px 28px rgba(58, 207, 239, 0.18);
}

.new-hero-primary span {
  font-size: 17px;
  line-height: 1;
}

.new-hero-secondary {
  color: rgba(236, 249, 255, 0.9);
  background: rgba(3, 20, 31, 0.32);
  border: 1px solid rgba(143, 225, 250, 0.44);
  backdrop-filter: blur(10px);
}

.new-hero-primary:hover,
.new-hero-secondary:hover {
  transform: translateY(-2px);
}

.new-hero-primary:hover {
  box-shadow: 0 12px 34px rgba(58, 207, 239, 0.32);
}

.new-hero-secondary:hover {
  background: rgba(16, 72, 88, 0.55);
  border-color: rgba(143, 225, 250, 0.82);
}

.new-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  margin-top: 34px;
  color: rgba(184, 218, 230, 0.58);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.new-hero-meta span + span {
  position: relative;
  padding-left: 28px;
}

.new-hero-meta span + span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 16px;
  height: 1px;
  background: rgba(143, 225, 250, 0.4);
}

.new-hero-note {
  display: flex;
  align-items: center;
  gap: 18px;
  justify-self: end;
  max-width: 180px;
  color: rgba(177, 220, 234, 0.62);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.65;
  text-transform: uppercase;
}

.new-hero-note-line {
  width: 1px;
  height: 92px;
  background: linear-gradient(to bottom, transparent, rgba(143, 225, 250, 0.72), transparent);
}

.new-hero-scroll {
  position: absolute;
  right: clamp(28px, 8vw, 144px);
  bottom: 30px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(190, 228, 239, 0.62);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.new-hero-scroll-arrow {
  color: #8fe7fb;
  font-size: 18px;
  line-height: 1;
}

@media (max-width: 900px) {
  .new-hero {
    min-height: 720px;
    padding: 126px 28px 86px;
  }

  .new-hero-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .new-hero-note {
    display: none;
  }

  .new-hero h1 {
    max-width: 680px;
  }

  .new-hero-scroll {
    left: 28px;
    right: auto;
  }
}

@media (max-width: 520px) {
  .new-hero {
    min-height: 700px;
    padding: 116px 22px 78px;
  }

  .new-hero-media video {
    object-position: 58% center;
    opacity: 0.58;
  }

  .new-hero-shade {
    background:
      linear-gradient(180deg, rgba(1, 7, 13, 0.86) 0%, rgba(1, 8, 14, 0.7) 42%, rgba(1, 5, 9, 0.96) 100%),
      linear-gradient(90deg, rgba(1, 7, 13, 0.36), rgba(1, 7, 13, 0.08));
  }

  .new-hero h1 {
    font-size: clamp(40px, 12vw, 58px);
    line-height: 1.02;
  }

  .new-hero-lead {
    margin-top: 22px;
    font-size: 15px;
    line-height: 1.65;
  }

  .new-hero-actions {
    align-items: stretch;
    flex-direction: column;
    max-width: 260px;
    margin-top: 30px;
  }

  .new-hero-primary,
  .new-hero-secondary {
    width: 100%;
  }

  .new-hero-meta {
    gap: 10px;
    flex-direction: column;
    margin-top: 28px;
  }

  .new-hero-meta span + span {
    padding-left: 0;
  }

  .new-hero-meta span + span::before {
    display: none;
  }
}

/* ===== CLEAN HERO: SINGLE CONTENT CARD ===== */
body.frame-page.home-page #home.hero {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
}

body.frame-page.home-page #home.hero > .hero-copy {
  position: relative !important;
  z-index: 1 !important;
}

/* ===== FULL-VIEWPORT HERO WIDTH =====
   Keep the card in the hero, but remove the page/container width constraint. */
html,
body.frame-page.home-page,
body.frame-page.home-page #app {
  width: 100% !important;
  max-width: none !important;
}

body.frame-page.home-page #home.hero {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: hidden !important;
}

body.frame-page.home-page #home.hero > .hero-copy {
  width: min(760px, calc(100vw - 48px)) !important;
  max-width: calc(100vw - 48px) !important;
  margin-left: clamp(24px, 7.4vw, 106px) !important;
  margin-right: 0 !important;
}

@media (max-width: 640px) {
  body.frame-page.home-page #home.hero > .hero-copy {
    width: calc(100vw - 36px) !important;
    max-width: calc(100vw - 36px) !important;
    margin-left: 18px !important;
  }
}

/* Center the social-proof section against the viewport, not the narrower page frame. */
body.frame-page.home-page .home-social-proof-bg {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: 0 !important;
}

body.frame-page.home-page .home-testimonials {
  width: 77vw !important;
  max-width: 77vw !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 700px) {
  body.frame-page.home-page .home-testimonials {
    width: calc(100vw - 36px) !important;
  }
}

/* About uses a narrower content frame; keep its footer centered on the iframe viewport. */
body.frame-page.about-page {
  width: 100vw !important;
  max-width: 100vw !important;
  min-width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}

body.frame-page.about-page > .footer,
body.frame-page.about-page > .copyright {
  position: relative !important;
  left: 0 !important;
  width: 100vw !important;
  max-width: none !important;
  min-width: 100vw !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  transform: none !important;
}

/* Keep the footer surface full-bleed while constraining its content to 80vw. */
body.frame-page .footer,
body.frame-page .site-footer {
  padding-left: 10vw !important;
  padding-right: 10vw !important;
}

/* The public shell no longer reserves space for the removed admin sidebar. */
body.shell-page .site-frame {
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
}

/* The root shell owns the only footer. Keep the iframe in normal document
   flow so the shell header, page content, footer, and copyright share one
   scroll context. The frame script replaces the fallback height after load. */
body.shell-page {
  height: auto !important;
  min-height: 100vh;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.shell-page .site-frame {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  display: block !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: calc(100vh - 78px) !important;
  min-height: 320px;
  margin: 78px 0 0 !important;
  border: 0 !important;
  overflow: hidden;
}

body.shell-page > #shellFooter,
body.shell-page > .copyright {
  position: relative !important;
  width: 100vw !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 1024px) {
  body.shell-page .site-frame {
    height: calc(100dvh - 60px - env(safe-area-inset-top, 0px)) !important;
    margin-top: calc(60px + env(safe-area-inset-top, 0px)) !important;
  }
}

/* Defensive cleanup for legacy social SVG fragments left outside removed
   inner-page footers during the shared-shell migration. */
body.frame-page > svg[viewBox="0 0 24 24"][width="16"][height="16"] {
  display: none !important;
}

/* Inner pages are content-sized inside the shell. A viewport minimum here
   makes the shared footer look detached from short pages. */
body.frame-page {
  height: auto !important;
  min-height: 0 !important;
}

body.frame-page .blog-page {
  min-height: 0 !important;
}

body.shell-page .site-frame {
  min-height: 0 !important;
}

/* Give all shared footer section headings a slightly stronger size. */
body.shell-page > #shellFooter h3 {
  font-size: 13px !important;
}

/* Keep the shared footer full-bleed while constraining its content to 80%
   on laptop and desktop widths. */
@media (min-width: 769px) {
  body.shell-page > #shellFooter {
    padding-left: 10vw !important;
    padding-right: 10vw !important;
    box-sizing: border-box !important;
  }

  body.shell-page > #shellFooter #subscribeForm {
    width: 70% !important;
  }
}

body.shell-page > #shellFooter #subscribeForm input[type="email"] {
  background-color: var(--palette-paper) !important;
}

/* Use the supplied YouTube artwork in the shared footer only. */
body.shell-page > #shellFooter .footer-social-youtube > svg {
  display: none !important;
}

body.shell-page > #shellFooter .footer-social-youtube::after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  color: inherit;
  background: currentColor;
  -webkit-mask: url("../social-youtube.svg") center / contain no-repeat;
  mask: url("../social-youtube.svg") center / contain no-repeat;
}

/*
 * Keep the shared footer in the document flow. The iframe reports its full
 * content height to shell-frame.js, so neither the frame nor the footer needs
 * a fixed/sticky positioning context. Static positioning also prevents the
 * footer's stacking layer from visually covering content while scrolling up.
 */
body.shell-page {
  position: static !important;
  height: auto !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
body.shell-page .site-frame {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  display: block !important;
}
body.shell-page > #shellFooter,
body.shell-page > .copyright {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: auto !important;
  clear: both !important;
}

/*
 * iOS Safari needs the document root to own vertical scrolling. A scrollable
 * body combined with a content-height iframe can trap touch gestures inside
 * the iframe even though the shell is the intended scroll container.
 */
@media (max-width: 1024px) {
  html {
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body.shell-page {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* Match the Our Services hover treatment on the Experience video until the
   visitor clicks it. The native video controls remain above the effect. */
.experience-video-card .local-experience-video {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.experience-video-card .local-experience-video::before {
  content: "";
  position: absolute;
  top: 80px;
  right: 80px;
  bottom: 80px;
  left: 80px;
  z-index: 5;
  pointer-events: none;
  opacity: 0.5;
  border: 1px solid rgba(196, 225, 229, 0.34);
  transition:
    top 1.35s cubic-bezier(0.22, 1, 0.36, 1),
    right 1.35s cubic-bezier(0.22, 1, 0.36, 1),
    bottom 1.35s cubic-bezier(0.22, 1, 0.36, 1),
    left 1.35s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s ease;
}

.experience-video-card .local-experience-video::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0.5;
  border: 80px solid rgba(205, 235, 238, 0.28);
  box-sizing: border-box;
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  backdrop-filter: blur(1px) grayscale(0.78) saturate(0.3) brightness(1.12);
  -webkit-backdrop-filter: blur(1px) grayscale(0.78) saturate(0.3) brightness(1.12);
  transition: border-width 1.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.experience-video-card .home-experience-video {
  position: relative;
  z-index: 1;
  transform: none;
  transition: transform 220ms ease;
}

.experience-video-card:not(.is-video-active) .local-experience-video:hover::before,
.experience-video-card:not(.is-video-active) .local-experience-video:focus-within::before {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.experience-video-card:not(.is-video-active) .local-experience-video:hover::after,
.experience-video-card:not(.is-video-active) .local-experience-video:focus-within::after {
  border-width: 0;
}

.experience-video-card:not(.is-video-active) .local-experience-video:hover .home-experience-video,
.experience-video-card:not(.is-video-active) .local-experience-video:focus-within .home-experience-video {
  transform: scale(1.012);
}

.experience-video-card.is-video-active .local-experience-video::before {
  opacity: 0;
}

.experience-video-card.is-video-active .local-experience-video::after {
  opacity: 0;
  border-width: 0;
}

@media (min-width: 1025px) and (max-width: 1600px) {
  .experience-video-card .local-experience-video::before {
    top: 50px;
    right: 50px;
    bottom: 50px;
    left: 50px;
  }

  .experience-video-card .local-experience-video::after {
    border-width: 50px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .experience-video-card .local-experience-video::before,
  .experience-video-card .local-experience-video::after,
  .experience-video-card .home-experience-video {
    transition: none;
  }
}

/* Keep the three-card estimate section at 75% of the viewport on
   laptop and desktop layouts while preserving the stacked mobile flow. */
@media (min-width: 1025px) {
  body.frame-page.home-page .estimate-flow {
    width: 80vw !important;
    max-width: 80vw !important;
  }

  body.frame-page.home-page .estimate-steps {
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.frame-page.home-page .estimate-step-card::before {
    display: block;
    top: 50%;
    left: calc(100% + 0px);
    width: 24px;
    transform: translateY(-50%);
  }

  body.frame-page.home-page .estimate-step-card::after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(100% + 0px);
    width: 24px;
    height: 2px;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(93,215,255,.18), rgba(0,195,215,.72));
    box-shadow: 0 0 9px rgba(0,195,215,.42);
    transform: translateY(-50%);
  }

  body.frame-page.home-page .estimate-step-card:first-child::after {
    height: 10px;
    background:
      radial-gradient(circle at 4px 50%, rgba(93, 215, 255, .7) 0 2.5px, rgba(0, 195, 215, .42) 2.5px 3.5px, transparent 4px),
      linear-gradient(90deg, rgba(93,215,255,.18), rgba(0,195,215,.72)) center / 100% 2px no-repeat;
    box-shadow: 0 0 6px rgba(0,195,215,.25);
  }

  body.frame-page.home-page .estimate-step-card:last-child::before {
    height: 10px;
    background:
      radial-gradient(circle at calc(100% - 4px) 50%, rgba(93, 215, 255, .7) 0 2.5px, rgba(0, 195, 215, .42) 2.5px 3.5px, transparent 4px),
      linear-gradient(90deg, rgba(0,195,215,.72), rgba(93,215,255,.18)) center / 100% 2px no-repeat;
    box-shadow: 0 0 6px rgba(0,195,215,.25);
  }
}

/* Center the shared footer text and increase its size by 30% on phones. */
@media (max-width: 768px) {
  body.shell-page > #shellFooter {
    text-align: center !important;
  }

  body.shell-page > #shellFooter h3 {
    font-size: 18.2px !important;
    text-align: center !important;
  }

  body.shell-page > #shellFooter p,
  body.shell-page > #shellFooter a:not(.footer-social-link) {
    font-size: 18.2px !important;
    text-align: center !important;
  }

  body.shell-page > #shellFooter input {
    font-size: 18.2px !important;
    text-align: center !important;
  }

  body.shell-page > #shellFooter .subscribe {
    font-size: 19.5px !important;
    text-align: center !important;
  }

  body.shell-page > .copyright {
    font-size: 15.6px !important;
    text-align: center !important;
  }
}