/* =========================
   IPAD PORTRAIT — CENTERED ORB + DRAWER STACK
   Mirrors mobile logic, tablet-appropriate sizing.
   min-width: 769px  → mobile (≤768px) untouched.
   orientation: portrait → landscape untouched.
   max-width: 1080px → desktop (>1080px) untouched.
========================= */

/* =========================
   IPAD PORTRAIT — BACKGROUND STABILITY
   Force the fixed background layers onto their own GPU compositing
   layers so iOS Safari doesn't repaint them on every scroll frame.
   Must live OUTSIDE the orientation query so it applies immediately
   on layout, before any scroll interaction.
========================= */

@media (min-width: 769px) and (max-width: 1080px) and (orientation: portrait){
        /* Make template cards start flush left in foundations panel */
        .page-home .templates-track-foundations {
          width: 100% !important;
          padding-left: 0 !important;
        }
      /* Align template cards with panel text by removing left padding */
      .page-home .templates-track-foundations {
        padding-left: 0 !important;
      }
    /* Ultra-specific selectors to guarantee override for orb sizing */
    .page-home .ownership-first-layout > .orb,
    .page-home .process-layout > .orb,
    .page-home .foundations-layout > .orb,
    .page-home .orb-layout-offerings > .orb,
    .page-home .contact-layout > .orb,
    .ownership-first-layout:not(.x) > .orb,
    .process-layout:not(.x) > .orb,
    .foundations-layout:not(.x) > .orb,
    .orb-layout-offerings:not(.x) > .orb,
    .contact-layout:not(.x) > .orb {
      width: min(500px, 78vw) !important;
      max-width: 78vw !important;
      aspect-ratio: 1 / 1 !important;
      padding: 3rem 2.4rem !important;
      border-radius: 50% !important;
      background: radial-gradient(
        circle,
        rgba(255,255,255,0.92) 0%,
        rgba(255,255,255,0.52) 42%,
        rgba(255,255,255,0.14) 68%,
        rgba(255,255,255,0) 82%
      ) !important;
      box-shadow: 0 0 80px rgba(255,255,255,0.12) !important;
      overflow: visible !important;
      -webkit-mask-image: none !important;
      mask-image: none !important;
      position: relative !important;
      display: grid !important;
      place-items: center !important;
      text-align: center !important;
      z-index: 1 !important;
    }
  /* Lift ::before / ::after to own GPU layers — prevents the
     "position: fixed jitter" that iOS Safari exhibits during scroll. */
  .page-home::before,
  .page-home::after{
    transform: translateZ(0) !important;
    will-change: transform !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }

  /* Kill elastic overscroll (rubber-band) — the primary cause of the
     "background jumps" on iPad Safari during momentum scroll. */
  html,
  body.page-home{
    overscroll-behavior: none !important;
    overscroll-behavior-y: none !important;
    -webkit-overflow-scrolling: auto !important;
  }
  /* Force all orbs to match ownership-first size in iPad portrait */
  .ownership-first-layout .orb,
  .process-layout .orb,
  .foundations-layout .orb,
  .orb-layout-offerings .orb,
  .contact-layout .orb {
    width: min(500px, 78vw) !important;
    max-width: 78vw !important;
    aspect-ratio: 1 / 1 !important;
    padding: 3rem 2.4rem !important;
    border-radius: 50% !important;
    background: radial-gradient(
      circle,
      rgba(255,255,255,0.92) 0%,
      rgba(255,255,255,0.52) 42%,
      rgba(255,255,255,0.14) 68%,
      rgba(255,255,255,0) 82%
    ) !important;
    box-shadow: 0 0 80px rgba(255,255,255,0.12) !important;
    overflow: visible !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    text-align: center !important;
  }
}

@media (min-width: 769px) and (max-width: 1080px) and (orientation: portrait){

  /* --- Snap / scroll --- */
  .home-snap{
  scroll-snap-type: none !important;
  min-height: 100svh !important;
  height: auto !important;
}

  .nav-panel{
    scroll-snap-align: none !important;
  }

  .page-home,
  .page-home .home-snap{
    overflow-x: hidden !important;
  }

  .page-home .nav-panel{
    width: 100%;
    min-height: 100svh !important;
    padding: clamp(3rem, 7vw, 5rem) 1.5rem !important;
    overflow: visible !important;
  }

  .page-home .nav-panel:last-child{
  padding-bottom: clamp(3rem, 7vw, 5rem) !important;
}

  .page-home .nav-panel.neutral{
    display: grid;
    place-items: center;
  }

  /* --- Layout: single column, centered --- */
  .ownership-first-layout,
  .orb-layout-right.process-layout,
  .orb-layout-left.foundations-layout,
  .orb-layout-centered.orb-layout-offerings,
  .orb-layout-right.contact-layout{
    width: min(100%, 92vw) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: clamp(1.25rem, 3.5vw, 2rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    column-gap: 0 !important;
  }

  /* --- Float overrides --- */
  .float-left,
  .float-center,
  .float-right,
  .process-layout .orb.float-left,
  .foundations-layout .orb.float-right,
  .orb-layout-offerings .orb.float-left,
  .contact-layout .orb.float-right{
    margin-left: auto !important;
    margin-right: auto !important;
    justify-self: center !important;
  }

  /* --- Order: orb first, drawer second --- */
  .ownership-first-layout > .orb,
  .process-layout > .orb,
  .foundations-layout > .orb,
  .orb-layout-offerings > .orb,
  .contact-layout > .orb{
    order: 1 !important;
  }

  .ownership-first-layout > .orb-drawer-ownership,
  .process-layout > .orb-drawer-process,
  .foundations-layout > .orb-drawer-foundations,
  .orb-layout-offerings > .orb-drawer-offerings,
  .contact-layout > .orb-drawer-contact{
    order: 2 !important;
    width: 100% !important;
    margin-top: 1.1rem !important;
  }

  /* --- Orb sizing --- */
  .ownership-first-layout .orb,
  .process-layout .orb,
  .foundations-layout .orb,
  .orb-layout-offerings .orb,
  .contact-layout .orb{
    width: min(500px, 78vw) !important;
    max-width: 78vw !important;
    aspect-ratio: 1 / 1 !important;
    padding: 3rem 2.4rem !important;
    border-radius: 50% !important;
    background: radial-gradient(
      circle,
      rgba(255,255,255,0.92) 0%,
      rgba(255,255,255,0.52) 42%,
      rgba(255,255,255,0.14) 68%,
      rgba(255,255,255,0) 82%
    ) !important;
    box-shadow: 0 0 80px rgba(255,255,255,0.12) !important;
    overflow: visible !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  .ownership-first-layout .orb::before,
  .process-layout .orb::before,
  .foundations-layout .orb::before,
  .orb-layout-offerings .orb::before,
  .contact-layout .orb::before{
    content: "" !important;
    position: absolute !important;
    inset: 12% 14% !important;
    border-radius: 50% !important;
    background: radial-gradient(
      circle,
      rgba(255,255,255,0.22) 0%,
      rgba(255,255,255,0.08) 45%,
      rgba(255,255,255,0) 75%
    ) !important;
    filter: none !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  .ownership-first-layout .orb::after,
  .process-layout .orb::after,
  .foundations-layout .orb::after,
  .orb-layout-offerings .orb::after,
  .contact-layout .orb::after{
    content: none !important;
  }

  /* --- Orb content / title --- */
  .orb-content-ownership,
  .orb-content-process,
  .orb-content-foundations,
  .orb-content-offerings,
  .orb-content-contact{
    width: min(100%, 340px) !important;
    transform: translateY(-4px) !important;
  }

  .orb-title-ownership,
  .orb-title-process,
  .orb-title-foundations,
  .orb-title-offerings,
  .orb-title-contact{
    font-size: clamp(1.5rem, 5.5vw, 2.1rem) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  /* --- Drawer wrapper --- */
  .orb-drawer-static,
  .orb-drawer-ownership,
  .orb-drawer-process,
  .orb-drawer-foundations,
  .orb-drawer-offerings,
  .orb-drawer-contact{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-self: center !important;
    overflow: visible !important;
  }

  .page-home .ownership-first-layout > .orb-drawer-ownership,
  .page-home .process-layout > .orb-drawer-process,
  .page-home .foundations-layout > .orb-drawer-foundations,
  .page-home .orb-layout-offerings > .orb-drawer-offerings,
  .page-home .contact-layout > .orb-drawer-contact{
    width: min(100%, 92vw) !important;
    max-width: min(100%, 92vw) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    transform: none !important;
  }

  /* Keep Offerings drawer width exactly matched to Process on iPad portrait */
  .page-home .process-layout > .orb-drawer-process,
  .page-home .orb-layout-offerings > .orb-drawer-offerings{
    width: min(100%, 92vw) !important;
    max-width: min(100%, 92vw) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* --- Panel sizing --- */
  .orb-panel-ownership,
  .orb-panel-process,
  .orb-panel-foundations,
  .orb-panel-offerings,
  .orb-panel-contact{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: clamp(1.5rem, 4vw, 2rem) clamp(1.5rem, 5vw, 2rem) !important;
    border-radius: 28px !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .page-home .orb-panel-ownership,
  .page-home .orb-panel-ownership,
  .page-home .orb-panel-process,
  .page-home .orb-panel-foundations,
  .page-home .orb-panel-offerings,
  .page-home .orb-panel-contact{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: clamp(1.5rem, 4vw, 2rem) clamp(1.5rem, 5vw, 2rem) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: auto !important;
    scrollbar-width: none !important;
  }

  .page-home .process-layout .orb-panel-process,
  .page-home .orb-layout-offerings .orb-panel-offerings{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .page-home .orb-panel-ownership::-webkit-scrollbar,
  .page-home .orb-panel-process::-webkit-scrollbar,
  .page-home .orb-panel-foundations::-webkit-scrollbar,
  .page-home .orb-panel-offerings::-webkit-scrollbar,
  .page-home .orb-panel-contact::-webkit-scrollbar{
    width: 0 !important;
    height: 0 !important;
  }

  .orb-panel-inner-ownership,
  .orb-panel-inner-process,
  .orb-panel-inner-foundations,
  .orb-panel-inner-offerings,
  .orb-panel-inner-contact,
  .orb-copy-ownership,
  .orb-copy-process,
  .orb-copy-foundations,
  .orb-copy-offerings,
  .orb-copy-contact{
    width: 100% !important;
    max-width: 100% !important;
  }

  .orb-copy-ownership,
  .orb-copy-process,
  .orb-copy-foundations,
  .orb-copy-offerings,
  .orb-copy-contact{
    gap: 1.1rem !important;
  }

  /* --- Panel title / divider / body --- */
  .orb-title-panel,
  .orb-copy-offerings .orb-title-panel,
  .orb-panel-foundations .orb-title-panel{
    width: 100% !important;
    max-width: min(100%, 46ch) !important;
    font-size: clamp(1.45rem, 5vw, 1.9rem) !important;
    line-height: 1.12 !important;
    white-space: normal !important;
    letter-spacing: 0 !important;
  }

  .orb-panel-foundations .orb-title-panel{
    max-width: none !important;
    text-wrap: normal !important;
    font-size: 0 !important;
  }

  .orb-panel-foundations .orb-title-panel::before{
    content: "Beautiful Websites- Ready to Launch";
    font-size: clamp(1.45rem, 5vw, 1.9rem) !important;
    line-height: 1.12 !important;
  }

  .orb-divider-ownership,
  .orb-divider-process,
  .orb-divider-foundations,
  .orb-divider-offerings,
  .orb-divider-contact{
    width: min(260px, 52vw) !important;
    max-width: 52vw !important;
    margin: 0.3rem auto 0.8rem !important;
  }

  .orb-body-wrap,
  .orb-copy-foundations .orb-body-wrap,
  .orb-copy-offerings .orb-body-wrap,
  .orb-body-ownership,
  .orb-body-process,
  .orb-body-foundations,
  .orb-body-offerings,
  .orb-body-contact,
  .orb-list-ownership,
  .process-accordion-static,
  .offerings-accordion-static,
  .contact-form-orb{
    width: 100% !important;
    max-width: 100% !important;
  }

  .orb-body-ownership,
  .orb-body-process,
  .orb-body-foundations,
  .orb-body-offerings,
  .orb-body-contact,
  .orb-list-ownership,
  .service-desc-process,
  .service-desc-offerings,
  .paragraph-3-offerings,
  .contact-form-orb label,
  .contact-form-orb .form-note{
    font-size: clamp(0.92rem, 2.5vw, 1.02rem) !important;
    line-height: 1.65 !important;
  }

  .orb-list-ownership{
    padding-left: 1.2rem !important;
    text-align: left !important;
  }

  .orb-copy-ownership .orb-list-ownership{
    padding-left: 0 !important;
    list-style-position: inside !important;
    text-align: center !important;
  }

  /* --- Templates carousel --- */
  .page-home .templates-carousel-foundations{
    --rootline-ipad-template-card: min(280px, 68vw);
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    scroll-behavior: smooth !important;
    scroll-padding-inline: 0 !important;
    scroll-snap-type: x mandatory !important;
    touch-action: pan-x pan-y !important;
  }

  .page-home .templates-track-foundations{
    gap: 0.9rem !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .page-home .template-card-foundations,
  .page-home .template-card-soon{
    flex: 0 0 var(--rootline-ipad-template-card) !important;
    flex-basis: var(--rootline-ipad-template-card) !important;
    border-radius: 18px !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
  }

  /* --- Accordion toggles --- */
  .service-toggle-process,
  .service-toggle-offerings{
    min-height: auto !important;
    padding: 1rem 0.85rem !important;
  }

  .service-title-process,
  .service-title-offerings,
  .service-price-offerings{
    letter-spacing: 0 !important;
  }

  .service-panel-inner-process,
  .service-panel-inner-offerings-card{
    padding-left: 1.1rem !important;
    padding-right: 1.1rem !important;
    transform: none !important;
  }

  /* --- Offerings drawer normalization (match other drawers on iPad) --- */
  .page-home .offerings-accordion-static{
    gap: 0.95rem !important;
    margin-top: 1.1rem !important;
  }

  .page-home .service-toggle-offerings{
    min-height: auto !important;
    padding: 1rem 0.85rem !important;
    align-items: center !important;
  }

  .page-home .service-toggle-inner-offerings{
    max-width: 85% !important;
    display: block !important;
  }

  .page-home .service-panel-inner-offerings-card{
    padding-left: 1.1rem !important;
    padding-right: 1.1rem !important;
    transform: none !important;
  }

  .page-home .heading-3-offerings,
  .page-home .paragraph-3-offerings{
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* --- Contact form --- */
  .contact-form-orb{
    gap: 1.1rem !important;
  }

  .contact-form-orb .form-row{
    grid-template-columns: 1fr !important;
    gap: 1.1rem !important;
  }

  .contact-form-orb input,
  .contact-form-orb textarea,
  .contact-form-orb .custom-select-trigger{
    padding: 0.9rem 1rem !important;
    border-radius: 14px !important;
  }

  /* --- Hero logo --- */
  .nav-panel.transparent .hero-logo{
    width: min(820px, 94vw) !important;
    max-width: 94vw !important;
    transform: translateY(-1vh) !important;
  }

  .nav-panel.transparent .hero-veil{
    padding: 18px 20px !important;
  }

  .nav-panel.transparent .scroll-cue{
    top: 0 !important;
    margin-top: clamp(0.5rem, 2vh, 1.5rem) !important;
  }

  /* --- Drawer open state --- */
  .page-home .orb-drawer-static.is-open{
    max-height: 68dvh !important;
    opacity: 1 !important;
    overflow: visible !important;
    pointer-events: auto !important;
    transform: translate(0, 0) !important;
    visibility: visible !important;
  }

  /* --- Side drawers become drop-down drawers --- */
  .page-home .orb-drawer-side{
    max-height: none !important;
    overflow: visible !important;
  }

  .page-home .orb-drawer-process:not(.is-open),
  .page-home .orb-drawer-contact:not(.is-open),
  .page-home .orb-drawer-foundations:not(.is-open){
    transform: translateY(-16px) !important;
  }
}

/* Final iPad portrait lock: keep Process and Offerings drawer widths identical */
@media (min-width: 769px) and (max-width: 1080px) and (orientation: portrait){
  .page-home .ownership-first-layout,
  .page-home .orb-layout-right.process-layout,
  .page-home .orb-layout-left.foundations-layout,
  .page-home .orb-layout-centered.orb-layout-offerings,
  .page-home .orb-layout-right.contact-layout{
    width: min(100%, 92vw) !important;
    max-width: min(100%, 92vw) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    justify-items: center !important;
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    column-gap: 0 !important;
    row-gap: clamp(1.25rem, 3.5vw, 2rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .page-home .ownership-first-layout > .orb,
  .page-home .process-layout > .orb,
  .page-home .foundations-layout > .orb,
  .page-home .orb-layout-offerings > .orb,
  .page-home .contact-layout > .orb,
  .page-home .process-layout > .orb.float-left,
  .page-home .foundations-layout > .orb.float-right,
  .page-home .orb-layout-offerings > .orb.float-left,
  .page-home .contact-layout > .orb.float-right{
    order: 1 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-self: center !important;
    align-self: center !important;
    transform: none !important;
  }

  .page-home .ownership-first-layout > .orb-drawer-ownership,
  .page-home .process-layout > .orb-drawer-process,
  .page-home .foundations-layout > .orb-drawer-foundations,
  .page-home .orb-layout-offerings > .orb-drawer-offerings,
  .page-home .contact-layout > .orb-drawer-contact{
    order: 2 !important;
    width: min(100%, 92vw) !important;
    max-width: min(100%, 92vw) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 1.1rem !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-self: center !important;
    align-self: center !important;
    transform: none !important;
  }

  .page-home .process-layout > .orb-drawer-process,
  .page-home .orb-layout-offerings > .orb-drawer-offerings{
    width: min(100%, 92vw) !important;
    max-width: min(100%, 92vw) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    transform: none !important;
  }

  .page-home .process-layout .orb-panel-process,
  .page-home .orb-layout-offerings .orb-panel-offerings{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    height: 62dvh !important;
    max-height: 62dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}

@media (max-width: 768px){

  .page-home .nav-panel:last-child{
    padding-bottom: clamp(2.5rem, 8vw, 4rem) !important;
  }

}

@media (min-width: 769px) and (max-width: 1024px){

  .page-home .nav-panel:last-child{
    padding-bottom: clamp(3rem, 7vw, 5rem) !important;
  }

}

@media (max-width: 768px){

  .page-home .nav-panel:last-child{
    padding-bottom: clamp(2.5rem, 8vw, 4rem) !important;
  }

}

@media (max-width: 768px){

  html,
  body.page-home{
    overscroll-behavior-y: none !important;
  }

  .page-home .site-mini-footer{
    margin: 1.25rem auto calc(4.5rem + env(safe-area-inset-bottom)) !important;
  }

}