/* Approved responsive contract. Desktop designs and Relax remain independent.
 * Landscape tablets from 1051 CSS px retain text + visual in the first screen.
 * Below that width (and on portrait tablets), content flows without collisions.
 */
/* Approved per-page title sizes, wide first screens only.
 * Keep every existing narrow-desktop/tablet/mobile size and all hero geometry. */
@media (min-width: 1367px) {
  body.about-page .about-hero-copy h1,
  body:not(.not-found-page) .portfolio-hero-copy h1,
  body:is(.automation-page, .reviews-page, .mobile-app-page, .audit-service-page,
    .shop-page, .corporate-page, .landing-page) .hero-copy h1,
  body:is(.service-ai, .service-crm, .service-processes, .service-cabinets,
    .service-strategy, .service-conversion, .service-reputation) .hero-copy h1 {
    font-size: 78px !important;
  }
  body.social-page .hero-copy h1 { font-size: 74px !important; }
  body.context-page .hero-copy h1 { font-size: 76px !important; }
  body .privacy-hero-copy h1 { font-size: 66px !important; }
  body.automation-page .hero-copy h1 { font-size: 70px !important; }
  body.corporate-page .hero-copy h1 { font-size: 72px !important; }
  body.shop-page .hero-copy h1 { font-size: 76px !important; }
  body.service-processes .hero-copy h1 { font-size: 76px !important; }
  body.service-crm .hero-copy h1 { font-size: 76px !important; }
  body.service-ai .hero-copy h1 { font-size: 78px !important; }
  /* Keep the two approved phrases on their authored two lines, with reduced
   * per-page sizes that clear the neighbouring visual. */
  body:is(.automation-page, .corporate-page, .service-conversion) .hero-copy h1 .shell-typing-line {
    white-space: nowrap;
  }
}

body:not(.relax) :is(.hero-grid, .portfolio-hero-grid, .contacts-hero-grid, .about-hero-grid, .trademark-hero-grid) > * {
  min-width: 0;
}

/* Article titles vary greatly in length. Preserve the approved font size and
 * word-by-word reveal, but let every authored line wrap inside its column. */
body.article-page .article-hero-copy .shell-typing-line {
  white-space: normal;
}
/* Ordinary words remain one inline block. Only a word wider than the whole
 * mobile column wraps between animated letters instead of escaping it. */
body.article-page .article-hero-copy .shell-typing-word {
  max-width: 100%;
  white-space: normal;
}

/* Both external depth-ruler families need clear air beside the hero visual.
 * At 1366px the closest family has only 24px left, including its tick marks.
 * Hide before contact; internal instruments (e.g. .lost-depth) stay intact. */
@media (max-width: 1366px) {
  body:not(.relax) :is(.hero, .dev-hero, .portfolio-hero) > :is(.depth-scale, .portfolio-depth) {
    display: none !important;
  }
}

@media (max-width: 1050px), (orientation: portrait) and (max-width: 1100px) {
  body:not(.relax) :is(.hero, .portfolio-hero, .contacts-hero, .about-hero, .trademark-hero) :is(.hero-grid, .portfolio-hero-grid, .contacts-hero-grid, .about-hero-grid, .trademark-hero-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 40px !important;
    align-items: start !important;
  }
  /* Match copy classes as tokens: additional page classes (e.g. not-found-copy)
   * must never make the text block inherit the visual's centred 720px slot. */
  body:not(.relax) :is(.hero-grid, .portfolio-hero-grid, .contacts-hero-grid, .about-hero-grid, .trademark-hero-grid) > :not(:is(.hero-copy, .portfolio-hero-copy, .contacts-hero-copy, .about-hero-copy, .trademark-hero-copy)) {
    width: min(100%, 720px) !important;
    max-width: 720px !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    justify-self: center !important;
  }
  body:not(.relax) .dev-hero {
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 88px !important;
  }
  body:not(.relax) .dev-hero .dev-proof {
    position: relative !important;
    inset: auto !important;
    margin: 48px auto 0 !important;
    transform: none !important;
  }
  body:not(.relax) .shell-typing-line { white-space: normal !important; }
}

@media (orientation: landscape) and (min-width: 1051px) and (max-width: 1366px) {
  body:not(.relax) :is(.hero, .portfolio-hero, .contacts-hero, .about-hero, .trademark-hero) :is(.hero-grid, .portfolio-hero-grid, .contacts-hero-grid, .about-hero-grid, .trademark-hero-grid) {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr) !important;
    gap: 32px !important;
    align-items: center !important;
  }
  body:not(.relax) :is(.hero-grid, .portfolio-hero-grid, .contacts-hero-grid, .about-hero-grid, .trademark-hero-grid) > :last-child {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    justify-self: end !important;
  }
  body:not(.relax) :is(.hero-copy, .portfolio-hero-copy, .contacts-hero-copy, .about-hero-copy, .trademark-hero-copy) h1 {
    font-size: clamp(44px, 4.8vw, 64px) !important;
  }
  body:not(.relax) .shell-typing-line { white-space: normal !important; }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 1050px) {
  body:not(.relax) :is(.hero, .portfolio-hero, .contacts-hero, .about-hero, .trademark-hero) {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 132px !important;
    padding-bottom: 76px !important;
  }
}

/* External artwork follows the stacked layout, including compact landscape
 * tablets and unfolded phones. Functional sonar/radar rings stay visible. */
@media (max-width:1050px), (orientation:portrait) and (max-width:1100px) {
  body:not(.relax) :is(.hero, .dev-hero, .portfolio-hero, .contacts-hero, .about-hero, .privacy-hero, .reviews-hero, .not-found-hero, .blog-hero)::before,
  body:not(.relax) :is(.portfolio-hero, .contacts-hero, .about-hero, .privacy-hero, .blog-hero)::after {
    display: none !important;
  }
}

/* Price/scope cards use full-width rows before their headings become cramped. */
@media (max-width: 1180px) {
  body .dev-price-panel {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 32px !important;
    padding: 32px !important;
  }
  body .dev-price-copy, body .price-points, body .price-points article { min-width: 0; }
  body .price-points { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; }
  body .price-points article { height: auto; min-height: 0; padding: 24px; }
  body .price-points h3 { line-height: 1.35; overflow-wrap: anywhere; }
  body :is(.context-price-line, .social-price-line) { flex-wrap: wrap; column-gap: 5px; }
  body :is(.context-price-line, .social-price-line) strong { white-space: nowrap; }
  body .contact-form-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; }
  body .contact-form { width: 100%; min-width: 0; }
}
@media (max-width: 600px) {
  body .dev-price-panel { padding: 26px 20px !important; }
  body .price-points { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Complete, consistently fitted case previews. The shared device module owns
 * dimensions, so max-width cannot silently distort the capture's proportions.
 */
body .dev-case-shot :is(.device-desktop, .device-tablet, .device-phone) img {
  object-fit: contain !important;
  object-position: top center !important;
  background: transparent;
  transform-origin: center center !important;
}
@media (min-width: 1101px) {
  body .dev-case-shot > [data-case-frame-fitted] {
    box-sizing: border-box !important;
    width: var(--case-device-width) !important;
    height: var(--case-device-height) !important;
    min-width: 0 !important; min-height: 0 !important;
    max-width: none !important; max-height: none !important;
    aspect-ratio: auto !important;
  }
  body .dev-case-shot > [data-case-frame-fitted] img {
    display: block !important; width: 100% !important; height: 100% !important;
    max-width: 100% !important; max-height: 100% !important;
    margin: 0 !important; padding: 0 !important;
    transform: scale(var(--case-capture-scale, 1)) !important;
  }
}
@media (max-width: 1100px) {
  body .dev-cases .case-viewport { --ddd-case-card-width: min(88vw, 960px); width: 100%; max-width: 100%; margin-inline: 0; border-radius: 0; }
  body .dev-cases .case-track { width: 100%; padding-inline: max(16px, calc((100vw - var(--ddd-case-card-width)) / 2)); scroll-padding-inline: max(16px, calc((100vw - var(--ddd-case-card-width)) / 2)); }
  body .dev-cases .dev-case-card {
    width: var(--ddd-case-card-width) !important; min-width: var(--ddd-case-card-width) !important; max-width: var(--ddd-case-card-width) !important;
    flex: 0 0 var(--ddd-case-card-width) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    height: auto !important; min-height: 0 !important;
  }
  body .dev-cases .dev-case-card > .dev-case-shot { grid-column: 1 !important; grid-row: 1 !important; }
  body .dev-cases .dev-case-card > .dev-case-info { grid-column: 1 !important; grid-row: 2 !important; min-width: 0; }
  body .dev-case-shot[data-service-devices-ready],
  body .project-grid.is-development .project-development .project-dev-gallery[data-service-devices-ready] {
    height: clamp(360px, 52vw, 520px) !important;
    min-height: 0 !important;
  }
  body .project-grid.is-development .project-development {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body .project-grid.is-development .project-development .project-dev-gallery {
    grid-column: 1 !important; grid-row: 1 !important;
  }
  body .project-grid.is-development .project-development .project-info {
    grid-column: 1 !important; grid-row: 2 !important;
  }
  body .dev-case-shot[data-service-devices-ready] > :is(.device-desktop, .device-tablet, .device-phone) {
    display: none !important;
  }
  body .dev-case-shot[data-service-devices-ready] > .is-case-screen-active {
    display: block !important;
    box-sizing: border-box !important;
    left: 50% !important; right: auto !important; top: 16px !important; bottom: auto !important;
    width: var(--case-device-width) !important;
    height: var(--case-device-height) !important;
    min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important;
    margin: 0 !important;
    aspect-ratio: auto !important;
    transform: translateX(-50%) !important;
    overflow: hidden !important;
  }
  body .dev-case-shot[data-service-devices-ready] .case-device-switcher {
    display: flex !important;
    bottom: 12px !important;
  }
  body .dev-case-shot[data-service-devices-ready] > .is-case-screen-active img {
    display: block !important; width: 100% !important; height: 100% !important;
    max-width: 100% !important; max-height: 100% !important;
    transform: scale(var(--case-capture-scale, 1)) !important;
    margin: 0 !important; padding: 0 !important;
  }
}
/* Landscape tablets retain a visible slice of adjacent development cases,
   matching the carousel affordance already present in portrait. */
@media (min-width: 1101px) and (max-width: 1366px) {
  body .dev-cases .case-viewport { --ddd-case-card-width: min(88vw, 1120px); }
}
@media (max-width: 760px) {
  body .dev-cases .case-viewport { --ddd-case-card-width: 80vw; }
  body .cases .case-controls { justify-content: flex-end; gap: 14px; padding-left: 0; }
  body .cases .case-controls button { width: 48px; height: 48px; }
  body .dev-case-shot[data-service-devices-ready],
  body .project-grid.is-development .project-development .project-dev-gallery[data-service-devices-ready] {
    height: clamp(260px, 78vw, 360px) !important;
  }
  body .case-device-button { padding-inline: 10px; }
}

/* The testimonial author must wrap, not force the journal beyond its track. */
body.reviews-page .review-journal, body.reviews-page .review-journal > * { min-width: 0; }
body.reviews-page .review-journal .review-card { box-sizing: border-box; min-width: 0; }
body.reviews-page .review-journal .review-content { min-width: 0; }
body.reviews-page .review-journal .review-meta > div { min-width: 0; }
body.reviews-page .review-journal .review-meta :is(strong, span) { white-space: normal; overflow-wrap: anywhere; }
@media (min-width: 761px) and (max-width: 1180px) {
  body.reviews-page .review-journal { grid-template-columns: minmax(0, 1fr); }
  body.reviews-page .review-journal-index { height: auto; }
  body.reviews-page .review-journal-list { display: flex; height: auto; overflow-x: auto; }
  body.reviews-page .reviews-archive .review-journal .review-card {
    grid-template-columns: minmax(0, .42fr) minmax(0, .58fr) !important;
    height: auto; min-height: 520px;
  }
  body.reviews-page .reviews-archive .review-journal .review-content { padding: 30px; }
  body.reviews-page .review-journal .review-meta { flex-wrap: wrap; }
}
/* Horizontal review choices follow their labels instead of fixed empty slots.
 * Keep the existing padding/gap and reserve ellipsis only for labels wider
 * than the phone's available row; the desktop sidebar remains unchanged. */
@media (max-width: 1180px) {
  body.reviews-page .review-journal-item {
    flex: 0 0 auto;
    width: max-content;
    max-width: calc(100vw - 72px);
  }
  body.reviews-page .review-journal-item:hover { transform: none; }
}
@media (min-width: 761px) and (max-width: 1024px) and (orientation: portrait) {
  body.reviews-page .reviews-archive .review-journal .review-card {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0;
  }
  body.reviews-page .reviews-archive .review-journal .review-card > .review-scan {
    grid-column: 1;
    grid-row: 1;
  }
  body.reviews-page .reviews-archive .review-journal .review-card > .review-content {
    grid-column: 1;
    grid-row: 2;
  }
}

/* Enlarged captures retain the device outline and the same minimal edge bleed. */
.portfolio-gallery figure { width: min(1180px, 100%); max-width: 100%; min-width: 0; }
.portfolio-gallery-stage {
  display: grid; place-items: center; min-width: 0; min-height: 0;
  padding: 20px; overflow: hidden;
  background: radial-gradient(ellipse at center, #b8dbe3, #eaf3f5);
}
.portfolio-gallery-device {
  box-sizing: border-box; overflow: hidden;
  border: 10px solid #0b2b3f; border-top-width: 24px; border-radius: 18px;
  background: #0b2b3f; box-shadow: 0 24px 45px rgba(4, 37, 55, .24);
}
.portfolio-gallery-device.gallery-device-tablet { border-width: 10px; border-radius: 22px; }
.portfolio-gallery-device.gallery-device-phone { border-width: 8px; border-radius: 26px; }
.portfolio-gallery-device img {
  display: block; width: 100%; height: 100%; object-fit: contain; object-position: top center;
  transform-origin: center center; transform: scale(var(--case-capture-scale, 1));
}

/* Full-resolution inspection for website captures on every device. */
.dev-case-shot[data-case-gallery-ready] { cursor: zoom-in; }
.dev-case-shot[data-case-gallery-ready]:focus-visible { outline: 3px solid #24cfe1; outline-offset: -5px; }
.case-capture-gallery[hidden] { display: none; }
.case-capture-gallery {
  position: fixed; z-index: 2147483644; inset: 0; display: grid; place-items: center;
  padding: calc(68px + env(safe-area-inset-top)) 12px calc(14px + env(safe-area-inset-bottom));
  background: rgba(1, 12, 26, .92); backdrop-filter: blur(12px);
}
.case-capture-gallery figure {
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  width: min(560px, 100%); height: 100%; max-height: 850px; min-height: 0;
  margin: 0; overflow: hidden; border: 1px solid rgba(95, 228, 240, .36);
  border-radius: 20px; background: #061c31;
}
.case-capture-stage {
  position: relative; display: grid; place-items: center; min-width: 0; min-height: 0;
  overflow: hidden; background: radial-gradient(ellipse at center, #b8dbe3, #eaf3f5);
}
.case-capture-device {
  box-sizing: border-box; overflow: hidden; flex: none;
  border: 8px solid #0b2b3f; border-top-width: 20px; border-radius: 16px;
  background: #0b2b3f; box-shadow: 0 16px 34px rgba(4, 37, 55, .24);
  transform-origin: center center;
}
.case-capture-device.gallery-device-tablet { border-width: 8px; border-radius: 20px; }
.case-capture-device.gallery-device-phone { border-width: 7px; border-radius: 24px; }
.case-capture-device img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  transform: scale(var(--case-capture-scale, 1)); transform-origin: center center;
}
.case-capture-gallery figcaption {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) auto 38px;
  gap: 8px; align-items: center; min-height: 70px; padding: 10px 12px;
  color: #fff; background: #08243d;
}
.case-capture-gallery figcaption strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.case-capture-gallery figcaption span { color: #69e4ee; font-size: 12px; font-weight: 800; white-space: nowrap; }
.case-capture-gallery button { display: grid; place-items: center; padding: 0; border: 1px solid rgba(104,229,240,.5); border-radius: 50%; color: #fff; background: #092b45; cursor: pointer; }
.case-capture-gallery figcaption button { position: relative; width: 38px; height: 38px; font-size: 0; line-height: 0; }
.case-capture-gallery figcaption button::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h16m-7-7 7 7-7 7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h16m-7-7 7 7-7 7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transform: translate(-50%,-50%); pointer-events: none;
}
.case-capture-gallery figcaption .case-capture-prev::before { transform: translate(-50%,-50%) scaleX(-1); }
.case-capture-gallery button[hidden] { visibility: hidden; }
.case-capture-close { position: absolute; z-index: 2; top: calc(14px + env(safe-area-inset-top)); right: 14px; width: 44px; height: 44px; }
.case-capture-close::before,.case-capture-close::after { content: ""; position: absolute; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.case-capture-close::before { transform: rotate(45deg); }
.case-capture-close::after { transform: rotate(-45deg); }
.case-capture-gallery-open { overflow: hidden; }
@media (min-width: 761px) {
  .case-capture-gallery { padding: 34px 78px; }
  .case-capture-gallery figure { width: min(1180px,100%); height: min(790px,calc(100vh - 68px)); border-radius: 24px; }
}
@media (max-width: 1100px) and (orientation: portrait) {
  body .dev-cases .dev-case-card > .dev-case-info { padding-top: 32px; }
}
@media (max-width: 760px) {
  body .dev-cases .dev-case-card > .dev-case-info { min-height: 0; }
  body .dev-cases .dev-case-info ul { margin: 18px 0 0; padding-top: 0; }
  body .dev-cases .dev-case-info li { font-size: 11px; }
}
@media (max-width: 760px) and (orientation: portrait) {
  body .dev-cases .dev-case-card > .dev-case-info { padding-top: 14px; }
}
body:is(.case-capture-gallery-open,.portfolio-gallery-open) #deepdive-ai-widget { display: none !important; }
.capture-zoom-hint { display: none; }
@media (max-width: 760px) {
  .portfolio-gallery { z-index: 2147483644; }
  .case-capture-stage,.portfolio-gallery-stage { touch-action: none; }
  .case-capture-device,.portfolio-gallery-device { will-change: auto; }
  .capture-zoom-hint {
    position: absolute; z-index: 1; left: 50%; bottom: 12px; display: block;
    width: max-content; max-width: calc(100% - 24px); padding: 6px 10px;
    border-radius: 999px; color: #e6faff; background: rgba(6, 35, 54, .8);
    font-size: 11px; line-height: 1.25; text-align: center; pointer-events: none;
    transform: translateX(-50%);
  }
  .is-zoomed > .capture-zoom-hint { opacity: 0; }
}

/* Page-specific optical fixes; no new typography system. */
body .services-map-point small { font-size: 12px; }
body .privacy-eyebrow { padding-left: 9px; }
body .privacy-eyebrow > span { flex: 0 0 10px; }
@media (max-width: 1100px) {
  body .social-studio .social-studio-screen {
    height: auto !important; min-height: 0; aspect-ratio: auto !important;
    padding-bottom: 18px !important;
    grid-template-rows: auto auto;
  }
  body .social-studio .social-flow {
    position: relative !important; inset: auto !important;
    grid-column: 1 / -1; height: auto !important; min-height: 38px;
    padding: 10px 8px; gap: 5px;
  }
  body .social-studio .social-flow span { white-space: normal; }
  body .social-studio .social-editor, body .social-studio .social-pulse { min-height: 0; }
  body .ads-console .ads-core { box-sizing: border-box; width: clamp(108px, 30%, 184px); height: auto; aspect-ratio: 1; padding: 12px; }
  body .ads-console .ads-core strong { margin: 3px 0; font-size: clamp(12px, 1.7vw, 18px); line-height: 1.2; white-space: nowrap; }
  /* The badge must clear the inset rounded contour, not merely the outer core. */
  body .ads-console .ads-core > span { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; padding: 4px 5px; font-size: clamp(7px, .9vw, 9px); line-height: 1.2; white-space: nowrap; }
  body .ads-console .ads-core > span i { flex: 0 0 5px; margin: 0; }
  body .ads-console .ads-channel { width: 27%; min-height: 54px; padding: 8px; }
  body .ads-console .ads-channel-search, body .ads-console .ads-channel-media { top: 8%; }
  body .ads-console .ads-channel-social, body .ads-console .ads-channel-crm { bottom: 20%; }
  body .ads-console .build-bay-screen { width: 100%; max-width: 100%; min-height: 300px; }
  body .mobile-app-page .app-product-feature { min-height: 424px; aspect-ratio: 1.25; }
  body .mobile-app-page .app-links { inset: 0; width: 100%; height: 100%; }
}
@media (max-width: 760px) {
  body .ads-console .build-bay-screen { aspect-ratio: auto; height: 300px; }
}
@media (max-width: 600px) {
  body .audit-levels .audit-level-options { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 900px) {
  body.seo-page:not(.audit-service-page) .approach-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Keep the longest legal heading readable without splitting its word or
 * letting it disappear behind the hero's overflow boundary. */
@media (orientation: landscape) and (min-width: 1051px) and (max-width: 1366px) {
  body:not(.relax) .privacy-hero-copy h1 { font-size: clamp(44px, 4.8vw, 62px) !important; }
}
@media (max-width: 380px) {
  body:not(.relax) .privacy-hero-copy h1 { font-size: clamp(28px, 9.3vw, 36px) !important; }
}

/* Shared typography ranges: layout ranges, not physical screen inches.
 * Preserve every approved wide-desktop h1 size. Special-purpose/legal heroes
 * and articles retain their existing independent title geometry. */
@media (max-width:760px),
       (orientation:landscape) and (max-width:1000px) and (max-height:600px) {
  body:not(.relax):not(.article-page):not(.not-found-page) {
    /* Interpolate from 320px to 393px, then retain the upper size in
     * wider portrait/landscape phone layouts. Keep every tier below h1. */
    --ddd-content-title-primary: clamp(36px, calc(36px + (100vw - 320px) * 6 / 73), 42px);
    --ddd-content-title-compact: clamp(32px, calc(32px + (100vw - 320px) * 6 / 73), 38px);
    --ddd-content-title-price: clamp(30px, calc(30px + (100vw - 320px) * 6 / 73), 36px);
    --ddd-content-title-technical: 32px;
    --ddd-card-copy-size: 16px;
    --ddd-card-title-large: 22px;
    --ddd-step-title: 18px;
    --ddd-case-title: 26px;
    --ddd-faq-question: 18px;
    --ddd-site-check-size: 16px;
    --ddd-review-copy-size: 16px;
    --ddd-review-copy-leading: 1.65;
    --ddd-product-link-size: 12px;
    --ddd-certificate-caption-size: 10px;
    --ddd-hero-description-size: 16px;
    --ddd-hero-description-leading: 1.6;
  }
  body:not(.relax):not(.article-page):not(.not-found-page) :is(
    .hero-copy, .about-hero-copy, .portfolio-hero-copy,
    .contacts-hero-copy:not(.privacy-hero-copy)
  ) h1 { font-size:clamp(40px,12.3vw,48px)!important; }
  /* The repeated blog CTA shares the catalogue's compact heading role.
   * Keep the article body and all other article typography independent. */
  body.article-page .blog-cta h2 {
    --ddd-content-title-compact: clamp(32px, calc(32px + (100vw - 320px) * 6 / 73), 38px);
  }
}

@media (orientation:portrait) and (min-width:700px) and (max-width:1100px),
       (orientation:landscape) and (min-width:1001px) and (max-width:1400px) and (min-height:601px) {
  body:not(.relax):not(.article-page):not(.not-found-page) {
    --ddd-content-title-primary: 52px;
    --ddd-content-title-compact: 48px;
    --ddd-content-title-price: 44px;
    --ddd-content-title-technical: 38px;
    --ddd-card-copy-size: 14px;
    --ddd-card-title-large: 24px;
    --ddd-step-title: 20px;
    --ddd-case-title: 32px;
    --ddd-faq-question: 20px;
    --ddd-site-check-size: 18px;
    --ddd-product-link-size: 12px;
    --ddd-certificate-caption-size: 10px;
    --ddd-utility-caption-size: 9px;
    --ddd-hero-description-size: 18px;
    --ddd-hero-description-leading: 1.65;
  }
  body:not(.relax):not(.article-page):not(.not-found-page) :is(
    .hero-copy, .about-hero-copy, .portfolio-hero-copy,
    .contacts-hero-copy:not(.privacy-hero-copy)
  ) h1 { font-size:56px!important; }
  body.article-page .blog-cta h2 { --ddd-content-title-compact: 48px; }
}

@media (max-width:1366px) {
  body:not(.relax):not(.article-page) {
    --ddd-product-link-size: 12px;
    --ddd-certificate-caption-size: 10px;
    --ddd-utility-caption-size: 9px;
  }
}
/* A portrait tablet uses the compact testimonial role, including mini. */
@media (orientation:portrait) and (min-width:700px) and (max-width:1100px) {
  body:not(.relax):not(.article-page) {
    --ddd-review-copy-size:16px;
    --ddd-review-copy-leading:1.65;
  }
}
/* Landscape tablet top navigation is a separate, approved compact role. */
@media (orientation:landscape) and (min-width:1061px) and (max-width:1250px) and (min-height:601px) {
  body:not(.relax) .service-bar .service-menu-trigger {font-size:13px!important;}
}

/* Proof bands meet the wave with the SEO reference caption clearance.
 * Transfer the old bottom gap above the band, without stretching its borders
 * or changing the surrounding hero's height. */
@media (max-width:1050px), (orientation:portrait) and (max-width:1100px) {
  /* This family has a shorter wave than SEO: its matching edge is 22px. */
  body:not(.relax) .dev-hero { padding-bottom: 22px !important; }
  body:not(.relax) .dev-hero .dev-proof { margin-top: 114px !important; }
}
@media (orientation:landscape) and (min-width:1051px), (orientation:portrait) and (min-width:1101px) {
  body:not(.relax) :is(.hero, .dev-hero) > .hero-proof { bottom: 30px !important; }
}
@media (orientation:landscape) and (max-width:1000px) and (max-height:600px) {
  body:not(.relax) .dev-hero { padding-bottom: 22px !important; }
  body:not(.relax) .dev-hero .dev-proof { margin-top: 102px !important; }
  body:is(.seo-page, .audit-service-page) .hero:not(.dev-hero) { padding-bottom: 0 !important; }
  body:is(.seo-page, .audit-service-page) .hero:not(.dev-hero) .hero-proof { margin-top: 176px !important; }
}

/* The two legacy service heroes use the same bottom fade as Analytics.
 * Keep their existing rings, proof geometry and wave position unchanged;
 * only cover the decorative arcs exposed below the proof band. */
body:is(.seo-page, .audit-service-page):not(.article-page) .hero:has(> .hero-proof)::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  height: 430px;
  -webkit-mask-image: none;
  mask-image: none;
  background: linear-gradient(to bottom, rgba(2,13,29,0), rgba(2,13,29,.58) 48%, #020d1d 88%);
  pointer-events: none;
}

/* Approved wave clearance: add blue air below service proof captions without
 * moving their text or stretching the service hero. Landing uses this same gap. */
body:not(.relax) .dev-hero:has(> .hero-proof) > .dev-hero-wave { bottom: -21px; }
body:is(.seo-page, .audit-service-page) .hero:has(> .hero-proof) + .approach::before { top: -29px; }
/* Complete only the two outside rails beneath the facts. Keep the band,
 * captions and inner dividers at their approved coordinates. The existing
 * higher wave layer (and hero clipping) hides the rails at the blue edge. */
body:not(.relax) :is(.hero, .dev-hero) > .hero-proof { overflow: visible; }
body:not(.relax) :is(.hero, .dev-hero) > .hero-proof::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -1px;
  right: -1px;
  height: 64px;
  border-left: 1px solid rgba(99,191,215,.18);
  border-right: 1px solid rgba(99,191,215,.18);
  pointer-events: none;
}
/* Stacked proof bands are in normal flow: grow the blue area itself, so the
 * shorter phone wave is not cropped when it moves down. Captions stay put. */
@media (max-width:1050px), (orientation:portrait) and (max-width:1100px) {
  body:not(.relax) .dev-hero:has(> .hero-proof) { padding-bottom: 42px !important; }
  body:not(.relax) .dev-hero:has(> .hero-proof) > .dev-hero-wave { bottom: -1px; }
}
@media (max-width:760px), (orientation:landscape) and (max-width:1000px) and (max-height:600px) {
  body:not(.relax) .dev-hero:has(> .hero-proof) { padding-bottom: 38px !important; }
  body:not(.relax) .dev-hero:has(> .hero-proof) > .dev-hero-wave { bottom: -1px; }
  body:is(.seo-page, .audit-service-page) .hero:has(> .hero-proof) + .approach::before { top: -33px; }
}

/* Article pages inherit the SEO body class, whose short-landscape rule removes
 * hero bottom padding. Reserve a complete 54px wave plus 32px of clear air;
 * the route card and its list remain in normal flow, regardless of list length. */
@media (orientation:landscape) and (max-width:1000px) and (max-height:600px) {
  body.article-page .hero.article-hero { padding-bottom: 86px !important; }
}

/* Approved external hero artwork only: uniform 3% on landscape tablets,
 * ordinary 4% above 1366px. Never target an instrument or a lower section.
 * Phone/portrait rules and all lower ::after fades remain unchanged. */
@media (orientation:landscape) and (min-width:1051px) and (min-height:601px) {
  body:not(.relax) { --ddd-external-ring-alpha:.04; }
  body:not(.relax) .hero:not(.article-hero)::before {
    display:block!important;
    background-image:repeating-radial-gradient(ellipse at 73% 46%,transparent 0 78px,rgba(76,193,222,var(--ddd-external-ring-alpha)) 79px 80px)!important;
    opacity:1!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
  body:not(.relax) .article-hero::before {
    display:block!important;
    background-image:repeating-radial-gradient(ellipse at 72% 45%,transparent 0 74px,rgba(76,193,222,var(--ddd-external-ring-alpha)) 75px 76px)!important;
    opacity:1!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
  /* Homepage glow was .1 beneath a .53 layer: retain its visible .053
   * while expressing ring alpha directly, without a second opacity factor. */
  body:not(.relax):not(.seo-page) .hero:not(.dev-hero)::before {
    background-image:radial-gradient(circle at 72% 30%,rgba(45,232,253,.053),transparent 23%),repeating-radial-gradient(ellipse at 75% 58%,transparent 0 73px,rgba(76,193,222,var(--ddd-external-ring-alpha)) 74px 75px)!important;
  }
  /* Privacy has existing circles in its own layered background, not ::before. */
  body:not(.relax) .privacy-hero {
    background-image:radial-gradient(circle at 77% 46%,rgba(9,103,144,.72),transparent 37%),repeating-radial-gradient(ellipse at 75% 48%,transparent 0 78px,rgba(85,221,235,var(--ddd-external-ring-alpha)) 79px 80px),linear-gradient(155deg,#04182d,#020c1c 76%);
  }
  /* Shell pages draw their external artwork in ::after. Privacy keeps its
   * existing single background layer; do not enable its hidden duplicate. */
  body:not(.relax) :is(.contacts-hero:not(.privacy-hero),.portfolio-hero,.about-hero)::after {
    display:block!important;
    opacity:1!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
  body:not(.relax) .contacts-hero:not(.privacy-hero)::after {
    background-image:repeating-radial-gradient(ellipse at 75% 48%,transparent 0 78px,rgba(76,193,222,var(--ddd-external-ring-alpha)) 79px 80px)!important;
  }
  body:not(.relax) .portfolio-hero::after {
    background-image:repeating-radial-gradient(ellipse at 72% 45%,transparent 0 74px,rgba(76,193,222,var(--ddd-external-ring-alpha)) 75px 76px)!important;
  }
  body:not(.relax) .about-hero::after {
    background-image:repeating-radial-gradient(ellipse at 74% 48%,transparent 0 76px,rgba(76,193,222,var(--ddd-external-ring-alpha)) 77px 78px)!important;
  }
}
@media (orientation:landscape) and (min-width:1051px) and (max-width:1366px) and (min-height:601px) {
  body:not(.relax) { --ddd-external-ring-alpha:.03; }
  body:not(.relax) .hero::before { transform:none!important; }
  body:not(.relax):not(.seo-page) .hero:not(.dev-hero)::before {
    background-image:radial-gradient(circle at 85% 50%,rgba(45,232,253,.053),transparent 23%),repeating-radial-gradient(ellipse at 85% 50%,transparent 0 73px,rgba(76,193,222,var(--ddd-external-ring-alpha)) 74px 75px)!important;
  }
  body:not(.relax) .contacts-hero:not(.privacy-hero)::after {
    background-image:repeating-radial-gradient(ellipse at 85% 50%,transparent 0 78px,rgba(76,193,222,var(--ddd-external-ring-alpha)) 79px 80px)!important;
  }
  body:not(.relax) .portfolio-hero::after {
    background-image:repeating-radial-gradient(ellipse at 85% 50%,transparent 0 74px,rgba(76,193,222,var(--ddd-external-ring-alpha)) 75px 76px)!important;
  }
  body:not(.relax) .about-hero::after {
    background-image:repeating-radial-gradient(ellipse at 85% 50%,transparent 0 76px,rgba(76,193,222,var(--ddd-external-ring-alpha)) 77px 78px)!important;
  }
}

/* Approved visible header labels: 10px desktop/tablet, 9px phone.
 * Scope excludes homepage/portfolio and leaves weight/spacing untouched.
 * Reuse the typography helper's measured floor to compensate static scaling. */
body :is(.build-bay:not(.build-bay--legacy)>.build-bay-head,.corp-showcase>.corp-showcase-head,.sonar-card.seo-ascent>.sonar-top,.sonar-card.audit-console>.sonar-top,.automation-map .automation-map-head,.route-map.services-map>.services-map-head)>:is(span,b) {
  --ddd-top-size:10px;
  --ddd-top-meta:1;
  --ddd-top-caption:0.9090909091;
  --ddd-top-label:0.8333333333;
  font-size:var(--ddd-top-size)!important;
}
body :is(.build-bay:not(.build-bay--legacy)>.build-bay-head,.corp-showcase>.corp-showcase-head,.sonar-card.seo-ascent>.sonar-top,.sonar-card.audit-console>.sonar-top,.automation-map .automation-map-head,.route-map.services-map>.services-map-head)>:is(span,b)[data-hc-font="meta"] {
  font-size:calc(var(--hc-floor-font) * var(--ddd-top-meta))!important;
}
body :is(.build-bay:not(.build-bay--legacy)>.build-bay-head,.corp-showcase>.corp-showcase-head,.sonar-card.seo-ascent>.sonar-top,.sonar-card.audit-console>.sonar-top,.automation-map .automation-map-head,.route-map.services-map>.services-map-head)>:is(span,b)[data-hc-font="caption"] {
  font-size:calc(var(--hc-floor-font) * var(--ddd-top-caption))!important;
}
body :is(.build-bay:not(.build-bay--legacy)>.build-bay-head,.corp-showcase>.corp-showcase-head,.sonar-card.seo-ascent>.sonar-top,.sonar-card.audit-console>.sonar-top,.automation-map .automation-map-head,.route-map.services-map>.services-map-head)>:is(span,b)[data-hc-font="label"] {
  font-size:calc(var(--hc-floor-font) * var(--ddd-top-label))!important;
}
@media(max-width:760px) {
  body :is(.build-bay:not(.build-bay--legacy)>.build-bay-head,.corp-showcase>.corp-showcase-head,.sonar-card.seo-ascent>.sonar-top,.sonar-card.audit-console>.sonar-top,.automation-map .automation-map-head,.route-map.services-map>.services-map-head)>:is(span,b) {
    --ddd-top-size:9px;
    --ddd-top-caption:0.9;
    --ddd-top-label:0.8181818182;
  }
}

/* Gallery touch gestures: pinch, pan, and swipe at natural scale. */
@media(pointer:coarse),(max-width:1100px){.case-capture-stage,.portfolio-gallery-stage{touch-action:none}}

/* Privacy draws the same external rings in its background, not a pseudo layer.
 * Preserve the existing glow/gradient and the already-approved phone treatment. */
@media (min-width:761px) and (max-width:1050px), (orientation:portrait) and (min-width:761px) and (max-width:1100px) {
  body:not(.relax) .privacy-hero {
    background-image:radial-gradient(circle at 77% 46%,rgba(9,103,144,.72),transparent 37%),linear-gradient(155deg,#04182d,#020c1c 76%)!important;
  }
}

:root{
  --ddd-external-ring-shape:ellipse 100px 64px;
  /* Shared phone/portrait-tablet artwork, matched to the approved homepage.
     .085 × .5508 = .046818 visible alpha; 100:85 means 15% vertical squeeze. */
  --ddd-mobile-ring-shape:ellipse 100px 85px;
  --ddd-mobile-ring-alpha:.046818;
  --ddd-mobile-ring-step:89px;
  --ddd-mobile-ring-start:90px;
  --ddd-mobile-ring-end:91px;
}
@media(orientation:portrait) and (max-width:1100px){
  :root{
    --ddd-mobile-ring-alpha:.04;
    --ddd-ambient-ring-mask-start:108px;
    --ddd-ambient-ring-mask-end:216px;
    --ddd-ambient-ring-mask-soft-1:24px;
    --ddd-ambient-ring-mask-soft-2:48px;
    --ddd-ambient-ring-mask-soft-3:76px;
  }
}
/* At this width the full desktop header is 163px tall. */
@media(orientation:portrait) and (min-width:1061px) and (max-width:1100px){
  :root{
    --ddd-ambient-ring-mask-start:167px;
    --ddd-ambient-ring-mask-end:275px;
  }
}

/* Shared first-screen ambient rings. No functional instrument, lower section,
   wave, desktop artwork or Relax surface is changed by this rule. */
@media(orientation:portrait) and (max-width:1100px){
  body:not(.relax) :is(.hero:not(#home-radar-center),.reviews-hero,.not-found-hero:not(.portfolio-hero),.blog-hero:not(.portfolio-hero))::before,
  body:not(.relax) :is(.portfolio-hero,.contacts-hero:not(.privacy-hero),.about-hero)::after{
    content:"";
    position:absolute;
    display:block!important;
    inset:0!important;
    width:auto!important;
    height:auto!important;
    border:0;
    border-radius:0!important;
    pointer-events:none;
    background:radial-gradient(var(--ddd-mobile-ring-shape) at var(--ddd-ambient-ring-x,50%) var(--ddd-ambient-ring-y,50%),var(--ddd-mobile-ring-stops))!important;
    opacity:1!important;
    transform:none!important;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0 var(--ddd-ambient-ring-mask-start),rgba(0,0,0,.03) calc(var(--ddd-ambient-ring-mask-start) + var(--ddd-ambient-ring-mask-soft-1)),rgba(0,0,0,.2) calc(var(--ddd-ambient-ring-mask-start) + var(--ddd-ambient-ring-mask-soft-2)),rgba(0,0,0,.55) calc(var(--ddd-ambient-ring-mask-start) + var(--ddd-ambient-ring-mask-soft-3)),#000 var(--ddd-ambient-ring-mask-end))!important;
    mask-image:linear-gradient(to bottom,transparent 0 var(--ddd-ambient-ring-mask-start),rgba(0,0,0,.03) calc(var(--ddd-ambient-ring-mask-start) + var(--ddd-ambient-ring-mask-soft-1)),rgba(0,0,0,.2) calc(var(--ddd-ambient-ring-mask-start) + var(--ddd-ambient-ring-mask-soft-2)),rgba(0,0,0,.55) calc(var(--ddd-ambient-ring-mask-start) + var(--ddd-ambient-ring-mask-soft-3)),#000 var(--ddd-ambient-ring-mask-end))!important;
  }
  body:not(.relax) :is(.portfolio-hero,.contacts-hero:not(.privacy-hero),.about-hero)::after{z-index:0}
}

/* The homepage keeps its separate, radar-aligned ring layer. Clear the same
   logo zone without moving that layer or changing the sonar geometry. */
@media(orientation:portrait) and (max-width:1100px){
  body:not(.relax) #home-radar-center::before{
    -webkit-mask-image:linear-gradient(to bottom,transparent 0 var(--ddd-ambient-ring-mask-start),rgba(0,0,0,.03) calc(var(--ddd-ambient-ring-mask-start) + var(--ddd-ambient-ring-mask-soft-1)),rgba(0,0,0,.2) calc(var(--ddd-ambient-ring-mask-start) + var(--ddd-ambient-ring-mask-soft-2)),rgba(0,0,0,.55) calc(var(--ddd-ambient-ring-mask-start) + var(--ddd-ambient-ring-mask-soft-3)),#000 var(--ddd-ambient-ring-mask-end))!important;
    mask-image:linear-gradient(to bottom,transparent 0 var(--ddd-ambient-ring-mask-start),rgba(0,0,0,.03) calc(var(--ddd-ambient-ring-mask-start) + var(--ddd-ambient-ring-mask-soft-1)),rgba(0,0,0,.2) calc(var(--ddd-ambient-ring-mask-start) + var(--ddd-ambient-ring-mask-soft-2)),rgba(0,0,0,.55) calc(var(--ddd-ambient-ring-mask-start) + var(--ddd-ambient-ring-mask-soft-3)),#000 var(--ddd-ambient-ring-mask-end))!important;
  }
}

/* Phone portrait: clear only the 84px header. The first content arc is already
   fully visible at 120px; wider portrait tablets keep their longer taper. */
@media(orientation:portrait) and (max-width:600px){
  body:not(.relax) :is(.hero:not(#home-radar-center),.reviews-hero,.not-found-hero:not(.portfolio-hero),.blog-hero:not(.portfolio-hero))::before,
  body:not(.relax) :is(.portfolio-hero,.contacts-hero:not(.privacy-hero),.about-hero)::after,
  body:not(.relax) #home-radar-center::before{
    -webkit-mask-image:linear-gradient(to bottom,transparent 0 84px,rgba(0,0,0,.08) 96px,rgba(0,0,0,.45) 108px,#000 120px)!important;
    mask-image:linear-gradient(to bottom,transparent 0 84px,rgba(0,0,0,.08) 96px,rgba(0,0,0,.45) 108px,#000 120px)!important;
  }
}

/* Match the homepage and four service hubs in portrait: move the artwork,
   while card numbers, titles, icon scale and touch feedback stay in place. */
@media(max-width:1050px) and (orientation:portrait){
  body:not(.relax) .service-grid .service-card .service-art img,
  body:not(.relax) #formats[data-hub-icons] .format-card .format-icon img{
    --ddd-portrait-icon-shift:16px;
    translate:0 calc(var(--ddd-portrait-icon-shift) - var(--ddd-portrait-icon-lift,0px));
  }
  body.automation-page:not(.relax) #formats[data-hub-icons] .format-card .format-icon img{
    --ddd-portrait-icon-lift:5px;
  }
}

/* Keep dark and light direction cards at the same 5px hover lift on touch. */
@media(hover:none) and (pointer:coarse){
  body:not(.relax) .service-grid .service-card-dark:hover,
  body:not(.relax) #formats[data-hub-icons] .format-card-dark:hover{
    transform:translateY(-5px);
  }
}

/* Explicit portrait ring stops: same 91px pitch, no repeating-gradient paint path.
 * 48 rings cover 4368px horizontally / 3712.8px vertically from the centre.
 * Shared with the homepage; never changes functional rings or landscape. */
:root{--ddd-mobile-ring-stops:
    rgba(76,193,222,0) 0px,rgba(76,193,222,0) 89px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 90px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 91px,
    rgba(76,193,222,0) 91px,rgba(76,193,222,0) 180px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 181px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 182px,
    rgba(76,193,222,0) 182px,rgba(76,193,222,0) 271px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 272px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 273px,
    rgba(76,193,222,0) 273px,rgba(76,193,222,0) 362px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 363px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 364px,
    rgba(76,193,222,0) 364px,rgba(76,193,222,0) 453px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 454px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 455px,
    rgba(76,193,222,0) 455px,rgba(76,193,222,0) 544px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 545px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 546px,
    rgba(76,193,222,0) 546px,rgba(76,193,222,0) 635px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 636px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 637px,
    rgba(76,193,222,0) 637px,rgba(76,193,222,0) 726px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 727px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 728px,
    rgba(76,193,222,0) 728px,rgba(76,193,222,0) 817px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 818px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 819px,
    rgba(76,193,222,0) 819px,rgba(76,193,222,0) 908px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 909px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 910px,
    rgba(76,193,222,0) 910px,rgba(76,193,222,0) 999px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 1000px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 1001px,
    rgba(76,193,222,0) 1001px,rgba(76,193,222,0) 1090px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 1091px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 1092px,
    rgba(76,193,222,0) 1092px,rgba(76,193,222,0) 1181px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 1182px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 1183px,
    rgba(76,193,222,0) 1183px,rgba(76,193,222,0) 1272px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 1273px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 1274px,
    rgba(76,193,222,0) 1274px,rgba(76,193,222,0) 1363px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 1364px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 1365px,
    rgba(76,193,222,0) 1365px,rgba(76,193,222,0) 1454px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 1455px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 1456px,
    rgba(76,193,222,0) 1456px,rgba(76,193,222,0) 1545px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 1546px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 1547px,
    rgba(76,193,222,0) 1547px,rgba(76,193,222,0) 1636px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 1637px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 1638px,
    rgba(76,193,222,0) 1638px,rgba(76,193,222,0) 1727px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 1728px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 1729px,
    rgba(76,193,222,0) 1729px,rgba(76,193,222,0) 1818px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 1819px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 1820px,
    rgba(76,193,222,0) 1820px,rgba(76,193,222,0) 1909px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 1910px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 1911px,
    rgba(76,193,222,0) 1911px,rgba(76,193,222,0) 2000px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 2001px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 2002px,
    rgba(76,193,222,0) 2002px,rgba(76,193,222,0) 2091px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 2092px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 2093px,
    rgba(76,193,222,0) 2093px,rgba(76,193,222,0) 2182px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 2183px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 2184px,
    rgba(76,193,222,0) 2184px,rgba(76,193,222,0) 2273px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 2274px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 2275px,
    rgba(76,193,222,0) 2275px,rgba(76,193,222,0) 2364px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 2365px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 2366px,
    rgba(76,193,222,0) 2366px,rgba(76,193,222,0) 2455px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 2456px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 2457px,
    rgba(76,193,222,0) 2457px,rgba(76,193,222,0) 2546px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 2547px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 2548px,
    rgba(76,193,222,0) 2548px,rgba(76,193,222,0) 2637px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 2638px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 2639px,
    rgba(76,193,222,0) 2639px,rgba(76,193,222,0) 2728px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 2729px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 2730px,
    rgba(76,193,222,0) 2730px,rgba(76,193,222,0) 2819px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 2820px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 2821px,
    rgba(76,193,222,0) 2821px,rgba(76,193,222,0) 2910px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 2911px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 2912px,
    rgba(76,193,222,0) 2912px,rgba(76,193,222,0) 3001px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 3002px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 3003px,
    rgba(76,193,222,0) 3003px,rgba(76,193,222,0) 3092px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 3093px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 3094px,
    rgba(76,193,222,0) 3094px,rgba(76,193,222,0) 3183px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 3184px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 3185px,
    rgba(76,193,222,0) 3185px,rgba(76,193,222,0) 3274px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 3275px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 3276px,
    rgba(76,193,222,0) 3276px,rgba(76,193,222,0) 3365px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 3366px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 3367px,
    rgba(76,193,222,0) 3367px,rgba(76,193,222,0) 3456px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 3457px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 3458px,
    rgba(76,193,222,0) 3458px,rgba(76,193,222,0) 3547px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 3548px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 3549px,
    rgba(76,193,222,0) 3549px,rgba(76,193,222,0) 3638px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 3639px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 3640px,
    rgba(76,193,222,0) 3640px,rgba(76,193,222,0) 3729px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 3730px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 3731px,
    rgba(76,193,222,0) 3731px,rgba(76,193,222,0) 3820px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 3821px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 3822px,
    rgba(76,193,222,0) 3822px,rgba(76,193,222,0) 3911px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 3912px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 3913px,
    rgba(76,193,222,0) 3913px,rgba(76,193,222,0) 4002px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 4003px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 4004px,
    rgba(76,193,222,0) 4004px,rgba(76,193,222,0) 4093px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 4094px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 4095px,
    rgba(76,193,222,0) 4095px,rgba(76,193,222,0) 4184px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 4185px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 4186px,
    rgba(76,193,222,0) 4186px,rgba(76,193,222,0) 4275px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 4276px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 4277px,
    rgba(76,193,222,0) 4277px,rgba(76,193,222,0) 4366px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 4367px,rgba(76,193,222,var(--ddd-mobile-ring-alpha)) 4368px,rgba(76,193,222,0) 4368.01px;}