/* What We Do — Nest Hub / Surface (901–1100px): banner text + form side-by-side
   (logo-and-branding layout on every What We Do page). Loaded AFTER page CSS.
   Does not change phone (<901) or desktop (>1100). */

@media screen and (min-width: 901px) and (max-width: 1100px) {
  html body[class][class][class] section.hero {
    padding-left: 20px !important;
    padding-right: 56px !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* 2-col: copy left, form right — classic, attach, and *-hero__inner */
  html body[class][class][class] section.hero .hero-inner,
  html body[class][class][class] section.hero .hero-inner.hero-inner--attach,
  html body[class][class][class] section.hero .seo-hero__inner,
  html body[class][class][class] section.hero .ebook-hero__inner,
  html body[class][class][class] section.hero .email-hero__inner,
  html body[class][class][class] section.hero .apparel-hero__inner,
  html body[class][class][class] section.hero .ecom-hero__inner,
  html body[class][class][class] section.hero .aichat-hero__inner,
  html body[class][class][class] section.hero .social-hero__inner,
  html body[class][class][class] section.hero .guest-hero__inner {
    display: grid !important;
    flex-direction: unset !important;
    flex-wrap: nowrap !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, min(400px, 40vw)) !important;
    gap: 24px 28px !important;
    row-gap: 24px !important;
    align-items: start !important;
    align-content: start !important;
    justify-content: unset !important;
    width: 100% !important;
    max-width: min(1140px, 100%) !important;
    margin: 0 auto !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  /* Attach pages: anonymous first wrapper (copy + tags) */
  html body[class][class][class] section.hero .hero-inner--attach > div:first-child {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  /* Copy / left column */
  html body[class][class][class] section.hero .hero-copy,
  html body[class][class][class] section.hero .hero__left,
  html body[class][class][class] section.hero .seo-hero__copy,
  html body[class][class][class] section.hero .ebook-hero__copy,
  html body[class][class][class] section.hero .email-hero__copy,
  html body[class][class][class] section.hero .apparel-hero__copy,
  html body[class][class][class] section.hero .ecom-hero__copy,
  html body[class][class][class] section.hero .aichat-hero__copy,
  html body[class][class][class] section.hero .social-hero__copy,
  html body[class][class][class] section.hero .guest-hero__copy,
  html body[class][class][class] section.hero .hero-inner--attach > div:first-child {
    width: 100% !important;
    max-width: 100% !important;
    flex: unset !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    padding-right: 0 !important;
    transform: none !important;
    align-self: start !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    order: unset !important;
  }

  /* Visual / form column — beside banner text */
  html body[class][class][class] section.hero .hero-visual,
  html body[class][class][class] section.hero .seo-hero__visual,
  html body[class][class][class] section.hero .ebook-hero__visual,
  html body[class][class][class] section.hero .email-hero__visual,
  html body[class][class][class] section.hero .apparel-hero__visual,
  html body[class][class][class] section.hero .ecom-hero__visual,
  html body[class][class][class] section.hero .aichat-hero__visual,
  html body[class][class][class] section.hero .social-hero__visual,
  html body[class][class][class] section.hero .guest-hero__visual {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
    transform: none !important;
    justify-self: stretch !important;
    align-self: start !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    order: unset !important;
  }

  /* Form cluster / wrap / card */
  html body[class][class][class] section.hero .hero-visual-group.hero-form-cluster,
  html body[class][class][class] section.hero .hero-form-cluster,
  html body[class][class][class] section.hero .seo-hero__form-wrap,
  html body[class][class][class] section.hero .ebook-hero__form-wrap,
  html body[class][class][class] section.hero .email-hero__form-wrap,
  html body[class][class][class] section.hero .apparel-hero__form-wrap,
  html body[class][class][class] section.hero .ecom-hero__form-wrap,
  html body[class][class][class] section.hero .ecom-hero__cluster,
  html body[class][class][class] section.hero .aichat-hero__form-wrap,
  html body[class][class][class] section.hero .aichat-hero__cluster,
  html body[class][class][class] section.hero .social-hero__form-wrap,
  html body[class][class][class] section.hero .social-hero__cluster,
  html body[class][class][class] section.hero .guest-hero__form-wrap,
  html body[class][class][class] section.hero .guest-hero__cluster,
  html body[class][class][class] section.hero .lead-form.lead-form--hero-v2,
  html body[class][class][class] section.hero #quizCard {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  html body[class][class][class] section.hero .social-hero__cluster,
  html body[class][class][class] section.hero .guest-hero__cluster,
  html body[class][class][class] section.hero .ecom-hero__cluster,
  html body[class][class][class] section.hero .aichat-hero__cluster {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Hide floating form deco that collides when stacked */
  html body[class][class][class] section.hero .seo-hero__form-arrow,
  html body[class][class][class] section.hero .aichat-hero__form-deco,
  html body[class][class][class] section.hero .hero-logo-floats,
  html body[class][class][class] section.hero .social-hero__cards,
  html body[class][class][class] section.hero .guest-hero__cards {
    display: none !important;
  }

  /* Active float tag — same as logo-and-branding (top-right of form) */
  html body[class][class][class] section.hero .lead-form,
  html body[class][class][class] section.hero .lead-form.lead-form--hero-v2,
  html body[class][class][class] section.hero .hero-visual,
  html body[class][class][class] section.hero .hero-form-cluster,
  html body[class][class][class] section.hero .seo-hero__form-wrap,
  html body[class][class][class] section.hero .ebook-hero__form-wrap,
  html body[class][class][class] section.hero .email-hero__form-wrap,
  html body[class][class][class] section.hero .apparel-hero__form-wrap,
  html body[class][class][class] section.hero .ecom-hero__form-wrap,
  html body[class][class][class] section.hero .aichat-hero__form-wrap,
  html body[class][class][class] section.hero .social-hero__form-wrap,
  html body[class][class][class] section.hero .guest-hero__form-wrap {
    overflow: visible !important;
    position: relative !important;
  }

  html body[class][class][class][class] section.hero .lead-form .hero-float,
  html body[class][class][class][class] section.hero .lead-form.lead-form--hero-v2 .hero-float,
  html body[class][class][class][class] section.hero #quizCard .hero-float,
  html body[class][class][class][class] section.hero .seo-hero__form .hero-float,
  html body[class][class][class][class] section.hero .ebook-hero__form .hero-float,
  html body[class][class][class][class] section.hero .email-hero__form .hero-float,
  html body[class][class][class][class] section.hero .apparel-hero__form .hero-float,
  html body[class][class][class][class] section.hero .social-hero__form .hero-float,
  html body[class][class][class][class] section.hero .guest-hero__form .hero-float {
    position: absolute !important;
    top: -10px !important;
    right: 8px !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 9px 14px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    box-shadow: 0 8px 22px rgba(69, 77, 161, 0.12) !important;
    white-space: nowrap !important;
    z-index: 6 !important;
    width: max-content !important;
  }

  html body[class][class][class][class] section.hero .lead-form .hero-float span,
  html body[class][class][class][class] section.hero .lead-form.lead-form--hero-v2 .hero-float span {
    color: #22b573 !important;
    font-weight: 700 !important;
  }
}

/* Nest Hub short height (~600): compact form beside banner text */
@media screen and (min-width: 901px) and (max-width: 1100px) and (max-height: 700px) {
  html body[class][class][class] section.hero {
    padding-top: 110px !important;
    padding-bottom: 28px !important;
    min-height: auto !important;
  }

  html body[class][class][class] section.hero .lead-form.lead-form--hero-v2,
  html body[class][class][class] section.hero #quizCard,
  html body[class][class][class] section.hero .seo-hero__form.lead-form--hero-v2,
  html body[class][class][class] section.hero .social-hero__form.lead-form--hero-v2,
  html body[class][class][class] section.hero .guest-hero__form.lead-form--hero-v2,
  html body[class][class][class] section.hero .ebook-hero__form.lead-form--hero-v2,
  html body[class][class][class] section.hero .email-hero__form.lead-form--hero-v2,
  html body[class][class][class] section.hero .apparel-hero__form.lead-form--hero-v2,
  html body[class][class][class] section.hero .ecom-hero__form.lead-form--hero-v2,
  html body[class][class][class] section.hero .aichat-hero__form.lead-form--hero-v2 {
    padding: 12px 12px 8px !important;
    gap: 5px !important;
  }

  html body[class][class][class] section.hero .lead-form.lead-form--hero-v2 > form {
    gap: 5px !important;
  }

  html body[class][class][class] section.hero .lead-form.lead-form--hero-v2 .lead-form__title {
    font-size: 15px !important;
  }

  html body[class][class][class] section.hero .lead-form.lead-form--hero-v2 .lead-form__subtitle {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  html body[class][class][class] section.hero .lead-form.lead-form--hero-v2 .lead-form__label {
    font-size: 10px !important;
  }

  html body[class][class][class] section.hero .lead-form.lead-form--hero-v2 .lead-form__input-shell .lead-form__input,
  html body[class][class][class] section.hero .lead-form.lead-form--hero-v2 .lead-form__input {
    min-height: 30px !important;
    padding: 5px 10px 5px 28px !important;
    font-size: 12px !important;
  }

  html body[class][class][class] section.hero .lead-form.lead-form--hero-v2 .lead-form__submit {
    font-size: 12px !important;
    padding: 8px 14px !important;
  }

}

/* Mobile (≤768 / iPhone 12 Pro ~390): ALL What We Do hero forms
   match web-design-and-development — width 100%, height auto, padding 16/14/12.
   High specificity so page CSS (even when linked after) cannot change box size. */
@media screen and (max-width: 768px) {
  html body[class][class][class][class][class] section.hero .hero-visual,
  html body[class][class][class][class][class] section.hero .hero-visual-group.hero-form-cluster,
  html body[class][class][class][class][class] section.hero .hero-form-cluster,
  html body[class][class][class][class][class] section.hero .seo-hero__form-wrap,
  html body[class][class][class][class][class] section.hero .ebook-hero__form-wrap,
  html body[class][class][class][class][class] section.hero .email-hero__form-wrap,
  html body[class][class][class][class][class] section.hero .apparel-hero__form-wrap,
  html body[class][class][class][class][class] section.hero .ecom-hero__form-wrap,
  html body[class][class][class][class][class] section.hero .ecom-hero__cluster,
  html body[class][class][class][class][class] section.hero .aichat-hero__form-wrap,
  html body[class][class][class][class][class] section.hero .aichat-hero__cluster,
  html body[class][class][class][class][class] section.hero .social-hero__form-wrap,
  html body[class][class][class][class][class] section.hero .social-hero__cluster,
  html body[class][class][class][class][class] section.hero .guest-hero__form-wrap,
  html body[class][class][class][class][class] section.hero .guest-hero__cluster,
  html body[class][class][class][class][class] section.hero .guest-hero__visual,
  html body[class][class][class][class][class] section.hero .mobile-hero__form-wrap,
  html body[class][class][class][class][class] section.hero .content-hero__form-wrap,
  html body[class][class][class][class][class] section.hero .ppc-hero__form-wrap,
  html body[class][class][class][class][class] section.hero .link-hero__form-wrap,
  html body[class][class][class][class][class] section.hero .hero-visual:has(> .lead-form),
  html body[class][class][class][class][class] section.hero .hero-inner--attach .hero-visual {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  html body[class][class][class][class][class] section.hero .lead-form.lead-form--hero-v2,
  html body[class][class][class][class][class] section.hero .lead-form,
  html body[class][class][class][class][class] section.hero #quizCard,
  html body[class][class][class][class][class] section.hero .hero-form-cluster .lead-form,
  html body[class][class][class][class][class] section.hero .hero-form-cluster .lead-form.lead-form--hero-v2,
  html body[class][class][class][class][class] section.hero .seo-hero__form.lead-form--hero-v2,
  html body[class][class][class][class][class] section.hero .ebook-hero__form.lead-form--hero-v2,
  html body[class][class][class][class][class] section.hero .email-hero__form.lead-form--hero-v2,
  html body[class][class][class][class][class] section.hero .apparel-hero__form.lead-form--hero-v2,
  html body[class][class][class][class][class] section.hero .ecom-hero__form.lead-form--hero-v2,
  html body[class][class][class][class][class] section.hero .aichat-hero__form.lead-form--hero-v2,
  html body[class][class][class][class][class] section.hero .social-hero__form.lead-form--hero-v2,
  html body[class][class][class][class][class] section.hero .guest-hero__form.lead-form--hero-v2 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 16px 14px 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Mobile only: hide Active float tag above hero forms (all What We Do pages) */
  html body[class][class][class][class] section.hero .lead-form .hero-float,
  html body[class][class][class][class] section.hero .lead-form.lead-form--hero-v2 .hero-float,
  html body[class][class][class][class] section.hero #quizCard .hero-float,
  html body[class][class][class][class] section.hero .seo-hero__form .hero-float,
  html body[class][class][class][class] section.hero .ebook-hero__form .hero-float,
  html body[class][class][class][class] section.hero .email-hero__form .hero-float,
  html body[class][class][class][class] section.hero .apparel-hero__form .hero-float,
  html body[class][class][class][class] section.hero .ecom-hero__form .hero-float,
  html body[class][class][class][class] section.hero .aichat-hero__form .hero-float,
  html body[class][class][class][class] section.hero .social-hero__form .hero-float,
  html body[class][class][class][class] section.hero .guest-hero__form .hero-float {
    display: none !important;
  }
}

/* Nest Hub — beat page CSS that loads after hero-surface (web-design, logo-branding, etc.) */
@media screen and (min-width: 901px) and (max-width: 1100px) {
  html body[class][class][class][class][class] section.hero .hero-inner,
  html body[class][class][class][class][class] section.hero .hero-inner.hero-inner--attach,
  html body[class][class][class][class][class] section.hero .seo-hero__inner,
  html body[class][class][class][class][class] section.hero .ebook-hero__inner,
  html body[class][class][class][class][class] section.hero .email-hero__inner,
  html body[class][class][class][class][class] section.hero .apparel-hero__inner,
  html body[class][class][class][class][class] section.hero .ecom-hero__inner,
  html body[class][class][class][class][class] section.hero .aichat-hero__inner,
  html body[class][class][class][class][class] section.hero .social-hero__inner,
  html body[class][class][class][class][class] section.hero .guest-hero__inner {
    display: grid !important;
    flex-direction: unset !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, min(400px, 40vw)) !important;
    gap: 24px 28px !important;
    max-width: min(1140px, 100%) !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  html body[class][class][class][class][class] section.hero .hero-copy,
  html body[class][class][class][class][class] section.hero .seo-hero__copy,
  html body[class][class][class][class][class] section.hero .social-hero__copy,
  html body[class][class][class][class][class] section.hero .guest-hero__copy,
  html body[class][class][class][class][class] section.hero .ebook-hero__copy,
  html body[class][class][class][class][class] section.hero .email-hero__copy,
  html body[class][class][class][class][class] section.hero .apparel-hero__copy,
  html body[class][class][class][class][class] section.hero .ecom-hero__copy,
  html body[class][class][class][class][class] section.hero .aichat-hero__copy,
  html body[class][class][class][class][class] section.hero .hero-inner--attach > div:first-child {
    transform: none !important;
    max-width: 100% !important;
  }

  html body[class][class][class][class][class] section.hero .hero-visual,
  html body[class][class][class][class][class] section.hero .seo-hero__visual,
  html body[class][class][class][class][class] section.hero .social-hero__visual,
  html body[class][class][class][class][class] section.hero .guest-hero__visual,
  html body[class][class][class][class][class] section.hero .ebook-hero__visual,
  html body[class][class][class][class][class] section.hero .email-hero__visual,
  html body[class][class][class][class][class] section.hero .apparel-hero__visual,
  html body[class][class][class][class][class] section.hero .ecom-hero__visual,
  html body[class][class][class][class][class] section.hero .aichat-hero__visual,
  html body[class][class][class][class][class] section.hero .hero-visual-group.hero-form-cluster,
  html body[class][class][class][class][class] section.hero .seo-hero__form-wrap,
  html body[class][class][class][class][class] section.hero .social-hero__form-wrap,
  html body[class][class][class][class][class] section.hero .guest-hero__form-wrap {
    transform: none !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
  }
}

/* Logo & Branding — Nest Hub 1024×600: beat page -72px/-40px nudge, form thoda left + no overlap */
@media screen and (min-width: 901px) and (max-width: 1100px) and (max-height: 700px) {
  html body.page-logo-branding.page-logo-design.page-logo-design-v2.has-top-promo-bar[class][class][class][class][class]
    section.hero
    .hero-inner.hero-inner--attach {
    grid-template-columns: minmax(0, 1fr) minmax(0, min(370px, 37vw)) !important;
    gap: 20px 40px !important;
    transform: none !important;
  }

  html body.page-logo-branding.page-logo-design.page-logo-design-v2.has-top-promo-bar[class][class][class][class][class]
    section.hero
    .hero-inner--attach
    > div:first-child,
  html body.page-logo-branding.page-logo-design.page-logo-design-v2.has-top-promo-bar[class][class][class][class][class]
    section.hero
    .hero-copy {
    transform: none !important;
    padding-right: 8px !important;
  }

  html body.page-logo-branding.page-logo-design.page-logo-design-v2.has-top-promo-bar[class][class][class][class][class]
    section.hero
    .hero-visual,
  html body.page-logo-branding.page-logo-design.page-logo-design-v2.has-top-promo-bar[class][class][class][class][class]
    section.hero
    .hero-visual-group.hero-form-cluster {
    transform: translateX(-20px) !important;
    margin-top: 0 !important;
  }
}

/* What We Do — mobile only: match apparel banner top gap (nav → badge).
   Apparel uses padding-top: 132px. Nuclear specificity so page CSS
   (140/150/158/172/192px) cannot leave uneven gaps. Desktop unchanged. */
@media screen and (max-width: 768px) {
  html
    body.has-top-promo-bar[class][class][class][class][class][class][class][class]
    section.hero,
  html
    body.has-top-promo-bar[class][class][class][class][class][class]
    section.hero,
  html body.has-top-promo-bar[class][class][class][class] section.hero {
    padding-top: 132px !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    align-content: flex-start !important;
    box-sizing: border-box !important;
  }

  html
    body.has-top-promo-bar[class][class][class][class][class][class][class][class]
    section.hero
    .hero-copy,
  html
    body.has-top-promo-bar[class][class][class][class][class][class][class][class]
    section.hero
    .hero__left,
  html
    body.has-top-promo-bar[class][class][class][class][class][class][class][class]
    section.hero
    .seo-hero__copy,
  html
    body.has-top-promo-bar[class][class][class][class][class][class][class][class]
    section.hero
    .ebook-hero__copy,
  html
    body.has-top-promo-bar[class][class][class][class][class][class][class][class]
    section.hero
    .email-hero__copy,
  html
    body.has-top-promo-bar[class][class][class][class][class][class][class][class]
    section.hero
    .apparel-hero__copy,
  html
    body.has-top-promo-bar[class][class][class][class][class][class][class][class]
    section.hero
    .ecom-hero__copy,
  html
    body.has-top-promo-bar[class][class][class][class][class][class][class][class]
    section.hero
    .aichat-hero__copy,
  html
    body.has-top-promo-bar[class][class][class][class][class][class][class][class]
    section.hero
    .social-hero__copy,
  html
    body.has-top-promo-bar[class][class][class][class][class][class][class][class]
    section.hero
    .guest-hero__copy,
  html
    body.has-top-promo-bar[class][class][class][class][class][class]
    section.hero
    .hero-copy,
  html
    body.has-top-promo-bar[class][class][class][class][class][class]
    section.hero
    .hero__left,
  html
    body.has-top-promo-bar[class][class][class][class][class][class]
    section.hero
    .apparel-hero__copy,
  html
    body.has-top-promo-bar[class][class][class][class]
    section.hero
    .hero-copy {
    margin-top: 0 !important;
    padding-top: 0 !important;
    transform: none !important;
    translate: none !important;
  }

  html
    body.has-top-promo-bar[class][class][class][class][class][class][class][class]
    section.hero
    .hero-inner,
  html
    body.has-top-promo-bar[class][class][class][class][class][class][class][class]
    section.hero
    .hero-inner.hero-inner--attach,
  html
    body.has-top-promo-bar[class][class][class][class][class][class][class][class]
    section.hero
    .seo-hero__inner,
  html
    body.has-top-promo-bar[class][class][class][class][class][class][class][class]
    section.hero
    .ebook-hero__inner,
  html
    body.has-top-promo-bar[class][class][class][class][class][class][class][class]
    section.hero
    .email-hero__inner,
  html
    body.has-top-promo-bar[class][class][class][class][class][class][class][class]
    section.hero
    .apparel-hero__inner,
  html
    body.has-top-promo-bar[class][class][class][class][class][class][class][class]
    section.hero
    .ecom-hero__inner,
  html
    body.has-top-promo-bar[class][class][class][class][class][class][class][class]
    section.hero
    .aichat-hero__inner,
  html
    body.has-top-promo-bar[class][class][class][class][class][class][class][class]
    section.hero
    .social-hero__inner,
  html
    body.has-top-promo-bar[class][class][class][class][class][class][class][class]
    section.hero
    .guest-hero__inner,
  html
    body.has-top-promo-bar[class][class][class][class][class][class]
    section.hero
    .hero-inner,
  html
    body.has-top-promo-bar[class][class][class][class][class][class]
    section.hero
    .apparel-hero__inner {
    margin-top: 0 !important;
    padding-top: 0 !important;
    transform: none !important;
    translate: none !important;
    align-content: flex-start !important;
    align-items: start !important;
  }
}