.zq-nav {
  background: rgba(255, 255, 255, .97);
  border: 1px solid rgba(3, 26, 60, .09);
  box-shadow: 0 14px 38px rgba(3, 26, 60, .16);
  height: 78px;
  padding: 10px 14px 10px 24px;
}

.zonqora-home-active,
.zq-site,
.zq-site button,
.zq-site input,
.zq-site select,
.zq-site textarea {
  font-family: "Manrope", sans-serif;
}

.zq-site {
  font-weight: 600;
  letter-spacing: -.02em;
}

.zq-site h1,
.zq-site h2,
.zq-site h3,
.zq-site h4,
.zq-site strong {
  letter-spacing: -.055em;
}

.zq-navlinks a {
  color: #111820;
  font-weight: 600;
}

.zq-navlinks a:hover {
  color: #049db9;
}

.zq-nav .zq-pill-light {
  color: #0a1118 !important;
  background: #f4f8fb;
  border: 1px solid #0a1118;
  box-shadow: none;
}

.zq-nav .zq-pill-light:hover {
  color: #fff !important;
  background: #031a3c;
}

.elementor-page-10 .elementor-element-6622e089 {
  padding: 0 !important;
}

.elementor-page-10 .elementor-element-6622e089 > .e-con-inner {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
}

.elementor-page-10 .elementor-widget-shortcode,
.elementor-page-10 .elementor-shortcode,
.elementor-page-10 .zq-site {
  width: 100% !important;
  max-width: none !important;
}

.zq-hero {
  min-height: 680px;
  margin: 8px;
}

.zq-hero:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Crect x='18' y='18' width='4' height='4' rx='.5' fill='%23ffffff' fill-opacity='.22' transform='rotate(45 20 20)'/%3E%3C/svg%3E");
  background-size: 40px 40px;
  background-position: 0 0;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.86), rgba(0,0,0,.38));
  pointer-events: none;
}

.zq-action-stack {
  top: 454px;
  z-index: 50;
  width: 310px;
  transform: translateX(-50%);
}

.zq-action-stack a,
.zq-action-stack .zq-action-primary {
  display: block;
  width: 100%;
  margin-top: 0;
  min-height: 80px;
  padding: 25px 32px;
  border: 0;
  border-radius: 999px;
  color: #031a3c;
  text-align: center;
  font: 800 18px/1.2 "Manrope", sans-serif;
  box-shadow: 0 5px 0 #031a3c, 0 11px 18px rgba(3,26,60,.16);
}

.zq-action-stack a:hover {
  background: #fff;
  transform: translateY(-2px);
}

.zq-action-primary {
  position: relative;
  z-index: 6;
  cursor: default;
  user-select: none;
  color: #031a3c;
  background: #08d0ec;
  text-align: center;
  box-shadow: 0 5px 0 #08d0ec, 0 12px 20px rgba(3,26,60,.18);
}

.zq-action-fan {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.zq-action-fan a {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform-origin: 88% 50%;
  transform: translateY(8px) rotate(0deg) scale(.92);
  transition:
    transform .62s cubic-bezier(.16,1,.3,1),
    opacity .24s ease,
    background .2s ease,
    box-shadow .2s ease;
  transition-delay: calc((3 - var(--i)) * 28ms);
  will-change: transform, opacity;
  background: #08d0ec;
  color: #031a3c;
  z-index: calc(var(--i) + 1);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 52px;
  text-align: left;
  box-shadow: 0 5px 0 #031a3c, 0 12px 20px rgba(3,26,60,.16) !important;
}

.zq-action-fan a:nth-child(2),
.zq-action-fan a:nth-child(3),
.zq-action-fan a:nth-child(4) {
  background: #08d0ec;
  color: #031a3c;
}

.zq-action-stack:hover .zq-action-fan,
.zq-action-stack:focus-within .zq-action-fan {
  pointer-events: auto;
}

.zq-action-stack:hover .zq-action-fan a,
.zq-action-stack:focus-within .zq-action-fan a {
  opacity: 1;
  transform: translateY(18px) rotate(var(--r)) scale(1);
  transition-delay: calc(var(--i) * 48ms);
}

.zq-action-stack:hover .zq-action-fan a:hover,
.zq-action-stack:focus-within .zq-action-fan a:hover {
  background: #fff;
  box-shadow: 0 5px 0 #08d0ec, 0 12px 20px rgba(3,26,60,.2) !important;
  color: #08d0ec;
  background: #031a3c;
  transform: translateY(18px) rotate(var(--r)) scale(1.025);
}

.zq-action-stack:hover .zq-action-primary,
.zq-action-stack:focus-within .zq-action-primary {
  color: #031a3c;
  background: #08d0ec;
}

.zq-floating-nav {
  transform: translate(-50%, 90px);
}

@media (max-width: 600px) {
  .zq-action-stack {
    top: 435px;
    transform: translateX(-50%) scale(.9);
  }
}
:root {
  --zq-bg: #f4f8fb;
  --zq-ink: #031a3c;
  --zq-blue: #08bfdc;
  --zq-lime: #08d0ec;
  --zq-purple: #062b5a;
}

.zq-hero {
  background:
    radial-gradient(circle at 50% 42%, rgba(170, 105, 255, .5), transparent 34%),
    radial-gradient(circle at 84% 18%, rgba(61, 105, 255, .32), transparent 28%),
    linear-gradient(135deg, #34108f 0%, #6120d4 48%, #832cff 100%);
}

.zq-hero:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .38;
  background: radial-gradient(circle at center, rgba(255,255,255,.2), transparent 58%);
  pointer-events: none;
}

.zq-particle-z {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: none;
}

.zq-mobile-hero-title {
  display: none;
}

.zq-nav .zq-mobile-menu-toggle {
  display: none !important;
}

.zq-action-stack {
  top: 445px;
  transform: translateX(-50%) rotate(0deg);
}

.zq-action-stack .zq-action-primary {
  color: #031a3c;
  border: 0;
  background: #08d0ec;
  box-shadow: 0 5px 0 #031a3c, 0 12px 20px rgba(3,26,60,.18);
}

.zq-action-stack .zq-action-primary:hover {
  color: #08d0ec;
  background: #031a3c;
  box-shadow: 0 5px 0 #08d0ec, 0 13px 22px rgba(3,26,60,.22);
}

.zq-confetti {
  display: none;
}

.zq-brand > .zq-brand-logo {
  position: relative;
  display: block;
  width: 170px;
  height: 50px;
  overflow: visible;
  border-radius: 0;
  background: transparent;
}

.zq-brand-logo img {
  position: static;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
}

.zq-brand.footer > .zq-brand-logo {
  width: 200px;
  height: 64px;
}

.zq-brand.footer .zq-brand-logo img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.zq-pill-green,
.zq-action-stack a,
.zq-form button {
  background: #08d0ec;
}

.zq-section h2 span,
.zq-work-slider h2 span {
  color: #08aeca;
}

@media (min-width: 901px) {
  .zq-intro {
    padding-top: 82px;
    padding-bottom: 92px;
  }

  .zq-intro .zq-kicker {
    margin-bottom: 52px;
    color: #202328;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.035em;
    text-transform: none;
  }

  .zq-intro .zq-kicker i {
    width: 15px;
    height: 15px;
    background: #08d0ec;
  }

  .zq-intro h2 {
    font-size: clamp(58px, 5.1vw, 84px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -.06em;
  }
}

/* Keep the project stack on phones too.  The site wrapper must stay visible,
   otherwise mobile browsers treat sticky items as ordinary positioned blocks. */
@media (max-width: 900px) {
  .zonqora-home-active .zq-site { overflow: visible; }
  .zq-showcases { padding-top: 34px; padding-bottom: 100px; }
  .zq-showcases .zq-case {
    position: sticky;
    top: 76px;
    margin: 0 0 54px;
    box-shadow: 0 -1px 0 rgba(3,26,60,.06), 0 22px 48px rgba(3,26,60,.16);
    transform-origin: 50% 0;
  }
  .zq-showcases .zq-case:nth-of-type(1) { z-index: 1; }
  .zq-showcases .zq-case:nth-of-type(2) { z-index: 2; }
  .zq-showcases .zq-case:nth-of-type(3) { z-index: 3; }
  .zq-showcases .zq-case:nth-of-type(4) { z-index: 4; margin-bottom: 0; }
}

@media (max-width: 600px) {
  .zq-showcases { padding-top: 22px; padding-bottom: 76px; }
  .zq-showcases .zq-case { top: 68px; margin-bottom: 38px; }
}

/* Premium expertise cards — pointer-led lift inspired by the supplied reference. */
.zq-service-grid {
  gap: 16px;
  margin-top: 62px;
  perspective: 1400px;
}

.zq-service-grid .zq-service-card {
  position: relative;
  min-height: 498px;
  padding: 34px 36px 0;
  border: 1px solid #dce5ee;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 35px rgba(3, 26, 60, .045);
  isolation: isolate;
  transition: transform .55s cubic-bezier(.2,.75,.2,1), box-shadow .55s ease, border-color .4s ease;
}

.zq-service-copy { position: relative; z-index: 3; }
.zq-service-grid h3 { margin: 0 0 13px; color: #031a3c; font-size: 28px; letter-spacing: -.045em; text-align: center; }
.zq-service-grid .zq-service-copy a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 31px;
  padding: 5px 12px;
  color: #087f9a;
  background: #e2f9fd;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 750;
  transition: color .3s ease, background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.zq-service-copy { text-align: center; }
.zq-service-grid .zq-service-copy a b { font-size: 15px; transition: transform .35s ease; }
.zq-service-preview {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: -15px;
  width: 82%;
  transform: translate3d(-50%,0,0);
  transform-origin: 50% 80%;
  filter: drop-shadow(0 18px 22px rgba(3,26,60,.12));
  transition: transform .48s cubic-bezier(.22,.72,.2,1), filter .48s ease;
  will-change: transform;
}
.zq-service-preview img { display: block; width: 100%; height: auto; border-radius: 5px; }
.zq-fan-images { width: 88%; height: 318px; bottom: -8px; filter: none; overflow: visible; }
.zq-fan-images img {
  position: absolute;
  top: 8px;
  width: 45%;
  height: 284px;
  object-fit: cover;
  object-position: top center;
  border: 5px solid #fff;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 16px 30px rgba(3,26,60,.14);
  transition: left .7s cubic-bezier(.18,.8,.2,1), transform .7s cubic-bezier(.18,.8,.2,1), box-shadow .55s ease, filter .55s ease;
  transform-origin: 50% 100%;
}
.zq-fan-images img:nth-child(1) { left: 9%; z-index: 1; transform: rotate(-13deg) scale(.91); }
.zq-fan-images img:nth-child(2) { left: 23%; z-index: 2; transform: rotate(-6deg) scale(.96); }
.zq-fan-images img:nth-child(3) { left: 28%; z-index: 5; transform: rotate(0) scale(1); }
.zq-fan-images img:nth-child(4) { left: 36%; z-index: 3; transform: rotate(6deg) scale(.96); }
.zq-fan-images img:nth-child(5) { left: 49%; z-index: 1; transform: rotate(13deg) scale(.91); }
.zq-service-card:hover .zq-fan-images { transform: translate3d(-50%,0,0); filter: none; }
.zq-service-card:hover .zq-fan-images img { box-shadow: 0 23px 38px rgba(3,26,60,.18); }
.zq-service-card:hover .zq-fan-images img:nth-child(1) { left: -7%; transform: rotate(-22deg) scale(.91); }
.zq-service-card:hover .zq-fan-images img:nth-child(2) { left: 10%; transform: rotate(-12deg) scale(.96); }
.zq-service-card:hover .zq-fan-images img:nth-child(3) { left: 28%; transform: rotate(0) scale(1.02) translateY(-4px); }
.zq-service-card:hover .zq-fan-images img:nth-child(4) { left: 48%; transform: rotate(12deg) scale(.96); }
.zq-service-card:hover .zq-fan-images img:nth-child(5) { left: 65%; transform: rotate(22deg) scale(.91); }
.zq-client-logos { position:absolute; z-index:8; left:0; right:0; bottom:0; height:52px; padding:0 12%; display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.96); border-top:1px solid #e8edf2; color:#aeb8c2; font:800 11px/1 "Manrope",sans-serif; letter-spacing:.04em; transition:color .35s ease; }
.zq-service-card:hover .zq-client-logos { color:#031a3c; }
.zq-service-card:hover {
  transform: none;
  border-color: #dce5ee;
  box-shadow: 0 14px 42px rgba(3,26,60,.075);
}
.zq-service-card:hover .zq-service-copy a,
.zq-service-copy a:hover,
.zq-service-copy a:focus-visible {
  padding: 5px 12px;
  color: #031a3c;
  background: #08d0ec;
  transform: scale(1.035);
  box-shadow: 0 7px 18px rgba(8,208,236,.25);
}
.zq-service-copy a:hover b,
.zq-service-copy a:focus-visible b { transform: translate(2px,-2px); }
.zq-service-card:hover .zq-service-preview {
  transform: translate3d(-50%,0,0);
  filter: drop-shadow(0 20px 23px rgba(3,26,60,.14));
}

@media (max-width: 600px) {
  .zq-service-grid { margin-top: 40px; gap: 12px; }
  .zq-service-grid .zq-service-card { min-height: 385px; padding: 25px 22px 0; border-radius: 18px; }
  .zq-service-grid h3 { font-size: 23px; margin-bottom: 9px; }
  .zq-service-preview { width: 94%; bottom: -4px; }
  .zq-fan-images { height: 234px; }
  .zq-fan-images img { height: 209px; border-width:3px; }
  .zq-client-logos { height:42px; padding:0 9%; font-size:8px; }
  .zq-service-grid .zq-service-copy a { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .zq-service-card,.zq-service-preview { transition-duration: .01ms !important; }
}

/* Stacked project cards: each case holds its position while the next one slides above it. */
@media (min-width: 901px) {
  .zonqora-home-active .zq-site {
    overflow: visible;
  }

  .zq-showcases {
    width: min(1240px, calc(100% - 48px));
    padding-top: 48px;
    padding-bottom: 150px;
  }

  .zq-showcases .zq-case {
    position: sticky;
    top: 92px;
    margin: 0 0 104px;
    box-shadow: 0 -1px 0 rgba(3,26,60,.05), 0 28px 70px rgba(3,26,60,.14);
    transform-origin: 50% 0;
  }

  .zq-showcases .zq-case:nth-of-type(1) { z-index: 1; }
  .zq-showcases .zq-case:nth-of-type(2) { z-index: 2; }
  .zq-showcases .zq-case:nth-of-type(3) { z-index: 3; }
  .zq-showcases .zq-case:nth-of-type(4) { z-index: 4; margin-bottom: 0; }
}

/* Featured real-estate work card.  Two crops of the original project screen create the layered gallery treatment. */
.zq-case-estate { background:#ffd2d4; }
.zq-case-estate .zq-case-copy { position:relative; z-index:4; padding:68px 0 64px 7.3%; }
.zq-case-estate h3 { font-size:clamp(52px,5.1vw,80px); margin-bottom:22px; }
.zq-case-estate .zq-sticker { color:#ff654f; margin-bottom:18px; }
.zq-estate-meta { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px; }
.zq-estate-meta span { padding:9px 12px; border-radius:999px; background:rgba(255,255,255,.66); font-weight:800; font-size:12px; }
.zq-case-estate .zq-tags span { background:#ff7469; border:0; color:#fff; border-radius:3px; padding:12px 10px 18px; font-weight:800; }
.zq-case-estate .zq-case-copy p { margin-top:auto; max-width:360px; font-size:17px; font-weight:600; }
.zq-case-estate .zq-case-copy>a { color:#114ac9; display:inline-flex; align-items:center; gap:12px; font-size:15px; padding:15px 20px; }
.zq-case-estate .zq-case-copy>a b { display:grid; place-items:center; border-radius:50%; width:23px; height:23px; background:#0d55dc; color:#fff; }
.zq-estate-visual { position:relative; min-height:590px; overflow:hidden; }
.zq-estate-orbit { position:absolute; width:510px; height:270px; border:12px solid rgba(255,255,255,.65); border-radius:50%; transform:rotate(47deg); left:-250px; top:205px; }
.zq-estate-screen { position:absolute; overflow:hidden; background:#fff; box-shadow:0 25px 60px rgba(32,39,58,.2); }
.zq-estate-screen img { display:block; width:100%; height:auto; }
.zq-estate-screen-main { z-index:2; top:86px; left:6%; width:65%; height:620px; border:7px solid #fff; border-radius:16px 16px 0 0; }
.zq-estate-screen-main img { transform:translateY(-2%); }
.zq-estate-screen-back { right:-8%; top:0; width:44%; height:590px; border-radius:20px 0 0 0; opacity:.98; }
.zq-estate-screen-back img { transform:translateY(-1%); }
.zq-estate-dots { position:absolute; z-index:3; left:3%; bottom:58px; display:grid; gap:8px; }
.zq-estate-dots i { width:10px; height:10px; border-radius:50%; background:#fff; }
.zq-estate-dots i:first-child { background:#ff674f; }

@media (max-width:900px) {
  .zq-case-estate .zq-case-copy { padding:42px 30px 32px; }
  .zq-estate-visual { min-height:510px; margin:0; }
  .zq-estate-screen-main { left:11%; top:52px; width:66%; height:500px; }
  .zq-estate-screen-back { width:38%; right:-4%; height:470px; }
  .zq-estate-orbit { left:-260px; top:170px; }
}

@media (max-width:600px) {
  .zq-case-estate .zq-case-copy { padding:36px 24px 28px; }
  .zq-case-estate h3 { font-size:54px; }
  .zq-case-estate .zq-case-copy p { font-size:15px; }
  .zq-estate-visual { min-height:395px; }
  .zq-estate-screen-main { top:35px; left:7%; width:73%; height:400px; border-width:4px; border-radius:10px 10px 0 0; }
  .zq-estate-screen-back { top:0; width:34%; height:370px; }
  .zq-estate-orbit { width:330px; height:180px; border-width:8px; left:-165px; top:126px; }
  .zq-estate-dots { left:4%; bottom:20px; }
}

/* Second project: New York dental clinic, using the same overlapping-screen composition. */
.zq-case-dental { background-color:#dce6ff; background-image:radial-gradient(rgba(31,80,178,.16) 1.3px, transparent 1.3px); background-size:15px 15px; }
.zq-case-dental .zq-case-copy { position:relative; z-index:4; padding:68px 0 64px 7.3%; }
.zq-case-dental h3 { font-size:clamp(52px,5.1vw,80px); margin-bottom:22px; }
.zq-case-dental .zq-sticker { color:#1555ce; margin-bottom:18px; }
.zq-dental-meta { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px; }
.zq-dental-meta span { padding:9px 12px; border-radius:999px; background:rgba(255,255,255,.72); font-weight:800; font-size:12px; }
.zq-case-dental .zq-tags span { background:#08cce8; color:#031a3c; border:0; border-radius:3px; padding:12px 10px 18px; font-weight:800; }
.zq-case-dental .zq-case-copy p { margin-top:auto; max-width:360px; font-size:17px; font-weight:600; }
.zq-case-dental .zq-case-copy>a { color:#114ac9; display:inline-flex; align-items:center; gap:12px; font-size:15px; padding:15px 20px; }
.zq-case-dental .zq-case-copy>a b { display:grid; place-items:center; border-radius:50%; width:23px; height:23px; background:#0d55dc; color:#fff; }
.zq-dental-visual { position:relative; min-height:590px; overflow:hidden; }
.zq-dental-swoop { position:absolute; width:520px; height:300px; border:12px solid rgba(255,255,255,.7); border-left-color:transparent; border-radius:50%; transform:rotate(28deg); left:-250px; top:212px; }
.zq-dental-screen { position:absolute; overflow:hidden; background:#07101c; box-shadow:0 25px 60px rgba(17,34,76,.22); }
.zq-dental-screen img { display:block; width:100%; height:auto; }
.zq-dental-screen-main { z-index:2; top:86px; left:6%; width:65%; height:620px; border:7px solid #fff; border-radius:16px 16px 0 0; }
.zq-dental-screen-main img { transform:translateY(-1%); }
.zq-dental-screen-back { right:-8%; top:0; width:44%; height:590px; border-radius:20px 0 0 0; }
.zq-dental-screen-back img { transform:translateY(-1%); }
.zq-dental-dots { position:absolute; z-index:3; left:3%; bottom:58px; display:grid; gap:8px; }
.zq-dental-dots i { width:10px; height:10px; border-radius:50%; background:#fff; }
.zq-dental-dots i:first-child { background:#1555ce; }

@media (max-width:900px) {
  .zq-case-dental .zq-case-copy { padding:42px 30px 32px; }
  .zq-dental-visual { min-height:510px; margin:0; }
  .zq-dental-screen-main { left:11%; top:52px; width:66%; height:500px; }
  .zq-dental-screen-back { width:38%; right:-4%; height:470px; }
  .zq-dental-swoop { left:-260px; top:170px; }
}

@media (max-width:600px) {
  .zq-case-dental .zq-case-copy { padding:36px 24px 28px; }
  .zq-case-dental h3 { font-size:54px; }
  .zq-case-dental .zq-case-copy p { font-size:15px; }
  .zq-dental-visual { min-height:395px; }
  .zq-dental-screen-main { top:35px; left:7%; width:73%; height:400px; border-width:4px; border-radius:10px 10px 0 0; }
  .zq-dental-screen-back { top:0; width:34%; height:370px; }
  .zq-dental-swoop { width:330px; height:180px; border-width:8px; left:-165px; top:126px; }
  .zq-dental-dots { left:4%; bottom:20px; }
}

/* Third project: London construction company, carrying the same browser-screen showcase system. */
.zq-case-construction { background:#f3e0d6; }
.zq-case-construction .zq-case-copy { position:relative; z-index:4; padding:68px 0 64px 7.3%; }
.zq-case-construction h3 { font-size:clamp(52px,5.1vw,80px); margin-bottom:22px; }
.zq-case-construction .zq-sticker { color:#c85f41; margin-bottom:18px; }
.zq-construction-meta { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px; }
.zq-construction-meta span { padding:9px 12px; border-radius:999px; background:rgba(255,255,255,.72); font-weight:800; font-size:12px; }
.zq-case-construction .zq-tags span { background:#17355a; color:#fff; border:0; border-radius:3px; padding:12px 10px 18px; font-weight:800; }
.zq-case-construction .zq-case-copy p { margin-top:auto; max-width:360px; font-size:17px; font-weight:600; }
.zq-case-construction .zq-case-copy>a { color:#114ac9; display:inline-flex; align-items:center; gap:12px; font-size:15px; padding:15px 20px; }
.zq-case-construction .zq-case-copy>a b { display:grid; place-items:center; border-radius:50%; width:23px; height:23px; background:#0d55dc; color:#fff; }
.zq-construction-visual { position:relative; min-height:590px; overflow:hidden; }
.zq-construction-lines { position:absolute; width:480px; height:390px; left:-176px; top:126px; opacity:.5; background:repeating-linear-gradient(122deg,transparent 0 29px,rgba(255,255,255,.7) 30px 33px,transparent 34px 69px); transform:rotate(-9deg); }
.zq-construction-screen { position:absolute; overflow:hidden; background:#07101c; box-shadow:0 25px 60px rgba(63,43,34,.22); }
.zq-construction-screen img { display:block; width:100%; height:auto; }
.zq-construction-screen-main { z-index:2; top:86px; left:6%; width:65%; height:620px; border:7px solid #fff; border-radius:16px 16px 0 0; }
.zq-construction-screen-main img { transform:translateY(-1%); }
.zq-construction-screen-back { right:-8%; top:0; width:44%; height:590px; border-radius:20px 0 0 0; }
.zq-construction-screen-back img { transform:translateY(-1%); }
.zq-construction-dots { position:absolute; z-index:3; left:3%; bottom:58px; display:grid; gap:8px; }
.zq-construction-dots i { width:10px; height:10px; border-radius:50%; background:#fff; }
.zq-construction-dots i:first-child { background:#c85f41; }

@media (max-width:900px) {
  .zq-case-construction .zq-case-copy { padding:42px 30px 32px; }
  .zq-construction-visual { min-height:510px; margin:0; }
  .zq-construction-screen-main { left:11%; top:52px; width:66%; height:500px; }
  .zq-construction-screen-back { width:38%; right:-4%; height:470px; }
}

@media (max-width:600px) {
  .zq-case-construction .zq-case-copy { padding:36px 24px 28px; }
  .zq-case-construction h3 { font-size:54px; }
  .zq-case-construction .zq-case-copy p { font-size:15px; }
  .zq-construction-visual { min-height:395px; }
  .zq-construction-screen-main { top:35px; left:7%; width:73%; height:400px; border-width:4px; border-radius:10px 10px 0 0; }
  .zq-construction-screen-back { top:0; width:34%; height:370px; }
  .zq-construction-lines { width:330px; height:275px; left:-132px; top:118px; }
  .zq-construction-dots { left:4%; bottom:20px; }
}

/* Fourth project: Sydney roofing specialists, with warm Australian-dusk accents. */
.zq-case-roofing { background:#e9ddcf; }
.zq-case-roofing .zq-case-copy { position:relative; z-index:4; padding:68px 0 64px 7.3%; }
.zq-case-roofing h3 { font-size:clamp(52px,5.1vw,80px); margin-bottom:22px; color:#22282b; }
.zq-case-roofing .zq-sticker { color:#bd572c; margin-bottom:18px; }
.zq-roofing-meta { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px; }
.zq-roofing-meta span { padding:9px 12px; border-radius:999px; background:rgba(255,255,255,.7); color:#303437; font-weight:800; font-size:12px; }
.zq-case-roofing .zq-tags span { background:#263137; border:0; color:#fff; border-radius:3px; padding:12px 10px 18px; font-weight:800; }
.zq-case-roofing .zq-case-copy p { margin-top:auto; max-width:360px; color:#35393b; font-size:17px; font-weight:600; }
.zq-case-roofing .zq-case-copy>a { display:inline-flex; align-items:center; gap:12px; color:#a74322; font-size:15px; padding:15px 20px; }
.zq-case-roofing .zq-case-copy>a b { display:grid; place-items:center; width:23px; height:23px; border-radius:50%; color:#fff; background:#bd572c; }
.zq-roofing-visual { position:relative; min-height:590px; overflow:hidden; background:linear-gradient(145deg,rgba(255,238,215,.45),transparent 48%); }
.zq-roofing-sun { position:absolute; top:114px; left:-174px; width:405px; height:405px; border:12px solid rgba(255,255,255,.54); border-radius:50%; box-shadow:0 0 0 38px rgba(189,87,44,.05); }
.zq-roofing-screen { position:absolute; overflow:hidden; background:#1e2428; box-shadow:0 25px 60px rgba(57,42,33,.26); }
.zq-roofing-screen img { display:block; width:100%; height:auto; }
.zq-roofing-screen-main { z-index:2; top:86px; left:6%; width:65%; height:620px; border:7px solid #f8f4ec; border-radius:16px 16px 0 0; }
.zq-roofing-screen-main img { transform:translateY(-1%); }
.zq-roofing-screen-back { top:0; right:-8%; width:44%; height:590px; border-radius:20px 0 0 0; }
.zq-roofing-screen-back img { transform:translateY(-1%); }
.zq-roofing-dots { position:absolute; z-index:3; bottom:58px; left:3%; display:grid; gap:8px; }
.zq-roofing-dots i { width:10px; height:10px; border-radius:50%; background:#fff; }
.zq-roofing-dots i:first-child { background:#bd572c; }

@media (max-width:900px) {
  .zq-case-roofing .zq-case-copy { padding:42px 30px 32px; }
  .zq-roofing-visual { min-height:510px; margin:0; }
  .zq-roofing-screen-main { top:52px; left:11%; width:66%; height:500px; }
  .zq-roofing-screen-back { right:-4%; width:38%; height:470px; }
}

@media (max-width:600px) {
  .zq-case-roofing .zq-case-copy { padding:36px 24px 28px; }
  .zq-case-roofing h3 { font-size:54px; }
  .zq-case-roofing .zq-case-copy p { font-size:15px; }
  .zq-roofing-visual { min-height:395px; }
  .zq-roofing-screen-main { top:35px; left:7%; width:73%; height:400px; border-width:4px; border-radius:10px 10px 0 0; }
  .zq-roofing-screen-back { top:0; width:34%; height:370px; }
  .zq-roofing-sun { top:92px; left:-126px; width:280px; height:280px; border-width:8px; }
  .zq-roofing-dots { bottom:20px; left:4%; }
}

.zq-metric-grid strong,
.zq-logo-metric b,
.zq-steps strong,
.zq-guide h2 span,
.zq-contact-copy h2,
.zq-footer-links b {
  color: #08d0ec;
}

@media (min-width: 601px) {
  .zq-hero {
    overflow: visible;
  }

  .zq-hero:before,
  .zq-hero:after,
  .zq-particle-z {
    border-radius: inherit;
  }

  .zq-nav {
    width: min(1580px, 78%);
  }
}

@media (max-width: 600px) {
  .zq-hero {
    min-height: 900px;
    margin: 6px;
    border-radius: 23px;
    background:
      radial-gradient(circle at 50% 38%, rgba(8,208,236,.23), transparent 35%),
      linear-gradient(145deg, #031a3c 0%, #074275 54%, #0787a4 100%);
  }

  .zq-hero:before {
    opacity: .72;
  }

  .zq-nav {
    top: 13px;
    width: calc(100% - 24px);
    height: 72px;
    padding: 8px 10px 8px 18px;
    border: 1px solid rgba(3,26,60,.09);
    border-radius: 40px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 14px 32px rgba(3,26,60,.16);
  }

  .zq-brand > .zq-brand-logo {
    width: 134px;
    height: 44px;
  }

  .zq-brand-logo img {
    filter: none;
  }

  .zq-nav .zq-pill-light {
    display: none;
  }

  .zq-action-stack {
    top: 510px;
    z-index: 50;
    display: block;
    width: 280px;
    transform: translateX(-50%) rotate(0deg);
  }

  .zq-action-stack a,
  .zq-action-stack .zq-action-primary {
    min-height: 68px;
    padding: 20px 24px;
    font-size: 16px;
  }

  .zq-action-fan a {
    padding-left: 38px;
  }

  .zq-action-stack.is-fan-open .zq-action-fan {
    pointer-events: auto;
  }

  .zq-action-stack.is-fan-open .zq-action-fan a {
    opacity: 1;
    transform: translateY(16px) rotate(var(--r)) scale(1);
    transition-delay: calc(var(--i) * 48ms);
  }

  .zq-action-stack.is-fan-open .zq-action-primary {
    color: #08d0ec;
    background: #031a3c;
    box-shadow: 0 5px 0 #08d0ec, 0 13px 22px rgba(3,26,60,.22);
  }

  .zq-particle-z {
    display: none;
  }

  .zq-mobile-hero-title {
    position: absolute;
    z-index: 5;
    top: 123px;
    left: 50%;
    display: flex;
    width: calc(100% - 30px);
    transform: translateX(-50%);
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #fff;
  }

  .zq-mobile-hero-title h1 {
    margin: 0;
    font: 800 clamp(35px, 10.5vw, 45px)/1.02 "Manrope", sans-serif;
    letter-spacing: -.065em;
    text-shadow: 0 12px 36px rgba(1,10,25,.28);
  }

  .zq-mobile-hero-title h1 span {
    color: #fff;
  }

  .zq-mobile-hero-title h1 strong {
    display: block;
    color: #16e2ff;
    font: inherit;
    letter-spacing: inherit;
    text-shadow: 0 0 25px rgba(22,226,255,.25);
  }

  .zq-mobile-hero-title > i {
    display: block;
    width: 12px;
    height: 12px;
    margin: 38px 0 22px;
    border-radius: 50%;
    background: #16e2ff;
    box-shadow: 0 0 20px rgba(22,226,255,.65);
  }

  .zq-mobile-hero-title > p {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.035em;
  }

  .zq-mobile-hero-title > p em {
    color: #16e2ff;
    font-style: normal;
  }

  .zq-mobile-hero-title > a {
    display: none;
    width: calc(100% - 34px);
    min-height: 70px;
    margin-top: 34px;
    padding: 18px 25px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 2px solid rgba(255,255,255,.72);
    border-radius: 999px;
    color: #031a3c;
    background: #16e2ff;
    box-shadow: 0 9px 0 #049fbb, 0 18px 36px rgba(1,15,34,.22);
    font-size: 18px;
    font-weight: 800;
  }

  .zq-mobile-review {
    margin-top: 260px;
    color: #fff;
    line-height: 1.18;
  }

  .zq-mobile-review > strong {
    display: block;
    color: #fff;
    font-size: 24px;
    letter-spacing: -.04em;
  }

  .zq-mobile-review > div {
    margin-top: 4px;
    color: #16e2ff;
    font-size: 21px;
    letter-spacing: 1px;
  }

  .zq-mobile-review > div b {
    color: #fff;
    font-size: 15px;
    letter-spacing: -.02em;
  }

  .zq-mobile-review small {
    color: rgba(255,255,255,.64);
    font-size: 13px;
  }

  .zq-nav .zq-mobile-menu-toggle {
    display: grid !important;
    width: 54px;
    height: 54px;
    padding: 15px 13px;
    place-content: center;
    gap: 5px;
    border: 1px solid rgba(3,26,60,.1);
    border-radius: 50%;
    background: #f4f8fb;
    cursor: pointer;
  }

  .zq-mobile-menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    border-radius: 3px;
    background: #071422;
    transition: .25s;
  }

  .zq-nav.is-open .zq-navlinks {
    position: absolute;
    top: 80px;
    left: 0;
    display: flex;
    width: 100%;
    padding: 20px;
    flex-direction: column;
    gap: 18px;
    border-radius: 24px;
    background: #071422;
    box-shadow: 0 20px 40px rgba(1,10,22,.28);
  }

  .zq-nav.is-open .zq-navlinks a {
    color: #fff;
    font-size: 16px;
  }
}