/*
 * Citrus Connections — separate desktop and compact-device experiences.
 * Loaded after the approved palette and safety layers. This file changes only the
 * homepage presentation; routing, service data, forms, and navigation stay on
 * the proven responsive foundation.
 */

.cc-mobile-copy,
.cc-mobile-actions {
  display: none;
}

.home-focused {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.home-focused > section {
  position: relative;
  z-index: 2;
}

/* Desktop homepage: animated tree and scroll-reactive root network. */
@media (min-width: 1181px) and (hover: hover) and (pointer: fine) {
  .home .site-fiber-stage {
    display: none !important;
  }

  .home-focused {
    background:
      radial-gradient(circle at 78% 8%, rgba(112,145,230,.18), transparent 28%),
      linear-gradient(180deg, #1a2758 0%, #22336e 46%, #1a2758 100%);
  }

  .home-focused .hero {
    background:
      radial-gradient(circle at 74% 40%, rgba(112,145,230,.25), transparent 34%),
      linear-gradient(135deg, rgba(26,39,88,.98), rgba(43,61,129,.95) 62%, rgba(26,39,88,.98)) !important;
  }

  .cc-roots {
    position: absolute;
    inset: 0 0 auto;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    transform: translate3d(0, var(--cc-root-shift, 0px), 0);
    will-change: transform;
  }

  .cc-roots svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .cc-root-main,
  .cc-root-branch {
    fill: none;
    stroke-linecap: round;
  }

  .cc-root-main {
    stroke: rgba(173,187,218,.18);
  }

  .cc-root-branch {
    stroke: rgba(134,151,196,.16);
  }

  .cc-root-progress,
  .cc-root-branch-progress {
    fill: none;
    stroke-linecap: round;
    filter: drop-shadow(0 0 7px rgba(112,145,230,.56));
  }

  .cc-root-progress {
    stroke: url(#cc-home-root-gradient);
  }

  .cc-root-branch-progress {
    stroke: #8697c4;
    opacity: .78;
  }

  .cc-root-node {
    fill: #263775;
    stroke: rgba(173,187,218,.58);
    stroke-width: 1.5;
    transition: fill .45s ease, stroke .45s ease, filter .45s ease;
  }

  .cc-root-node.is-active {
    fill: #7091e6;
    stroke: #ede8f5;
    filter: drop-shadow(0 0 8px rgba(112,145,230,.85));
  }

  .cc-tree {
    display: block;
    width: min(100%, 470px);
    height: auto;
    margin-inline: auto;
    filter: drop-shadow(0 24px 58px rgba(9,18,58,.4));
  }

  .hero-visual {
    min-height: 520px;
    display: grid;
    place-items: center;
  }

  .hero-core {
    bottom: 8%;
  }

  .connected-capabilities,
  .process-section {
    background: rgba(26,39,88,.66) !important;
    backdrop-filter: blur(2px);
  }

  .connected-capabilities {
    border-top: 1px solid rgba(173,187,218,.13);
  }

  .process-section {
    background: linear-gradient(180deg, rgba(38,55,117,.76), rgba(26,39,88,.82)) !important;
  }
}

/* Compact devices: deliberately shorter, static, and touch-first. */
@media (max-width: 1180px), (hover: none), (pointer: coarse) {
  .cc-desktop-experience,
  .hero-orbit,
  .process-network {
    display: none !important;
  }

  .cc-desktop-copy,
  .cc-desktop-actions {
    display: none !important;
  }

  .cc-mobile-copy {
    display: block !important;
  }

  .cc-mobile-actions {
    display: grid !important;
    gap: .9rem;
    margin-top: 1.5rem;
  }

  .home-focused,
  .home-focused > section {
    background: #1a2758 !important;
    background-image: none !important;
  }

  .home-focused .hero {
    min-height: 0 !important;
    background:
      radial-gradient(circle at 88% 10%, rgba(112,145,230,.2), transparent 32%),
      radial-gradient(circle at 10% 80%, rgba(134,151,196,.13), transparent 35%),
      #1a2758 !important;
  }

  .home-focused .hero-grid {
    display: block !important;
    min-height: 0 !important;
    padding-top: clamp(2.4rem, 8vw, 4rem) !important;
    padding-bottom: clamp(2.75rem, 9vw, 4.5rem) !important;
  }

  .home-focused .hero-copy {
    max-width: 100% !important;
  }

  .home-focused .hero-copy .display-xl {
    max-width: 11.5ch !important;
    font-size: clamp(2.45rem, 9vw, 4.9rem) !important;
    line-height: .98 !important;
    letter-spacing: -.055em !important;
  }

  .home-focused .hero-copy .lede {
    max-width: 42rem !important;
    font-size: clamp(1rem, 2.7vw, 1.18rem) !important;
    line-height: 1.6 !important;
    color: #d6ddef !important;
  }

  .cc-mobile-actions .btn {
    width: 100%;
    min-height: 56px;
    justify-content: center;
  }

  .cc-mobile-shortcuts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
  }

  .cc-mobile-shortcuts a {
    min-height: 48px;
    display: grid;
    place-items: center;
    padding: .72rem .6rem;
    border: 1px solid rgba(173,187,218,.34);
    border-radius: 12px;
    color: #ede8f5 !important;
    text-align: center;
    text-decoration: none;
    font-size: .84rem;
    font-weight: 700;
    line-height: 1.2;
    background: rgba(61,82,160,.3);
  }

  .home-focused .band--compact {
    padding-block: clamp(2.8rem, 8vw, 4.25rem) !important;
  }

  .home-focused .section-head {
    margin-bottom: 1.45rem !important;
  }

  .home-focused .section-head--split {
    display: block !important;
  }

  .home-focused .section-head .display-l {
    max-width: 12ch;
    font-size: clamp(2rem, 7.4vw, 3.25rem) !important;
    line-height: 1.02 !important;
  }

  .home-focused .practice-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: .9rem !important;
  }

  .home-focused .practice-card {
    min-height: 0 !important;
    padding: clamp(1.25rem, 5vw, 1.7rem) !important;
    border-radius: 16px !important;
    background: linear-gradient(145deg, rgba(61,82,160,.52), rgba(38,55,117,.9)) !important;
    box-shadow: none !important;
  }

  .home-focused .practice-card h3 {
    font-size: clamp(1.35rem, 5vw, 1.7rem) !important;
    line-height: 1.12 !important;
  }

  .home-focused .practice-card p {
    margin-top: .7rem !important;
    font-size: .98rem !important;
    line-height: 1.55 !important;
  }

  .home-focused .practice-card .arrow-link {
    margin-top: 1rem !important;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .home-focused .process-section {
    background: #263775 !important;
  }

  .home-focused .connected-process--three {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: .75rem !important;
  }

  .home-focused .process-step {
    position: relative;
    display: grid !important;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    grid-template-areas:
      "number title"
      "number body";
    align-items: start;
    gap: .1rem .85rem;
    min-height: 0 !important;
    padding: 1.15rem !important;
    border: 1px solid rgba(173,187,218,.22) !important;
    border-radius: 14px !important;
    background: rgba(26,39,88,.72) !important;
  }

  .home-focused .process-step::after,
  .home-focused .process-dot {
    display: none !important;
  }

  .home-focused .process-number {
    grid-area: number;
    width: 3.25rem;
    height: 3.25rem;
    display: grid;
    place-items: center;
    margin: 0 !important;
    border-radius: 12px;
    color: #ede8f5 !important;
    background: #3d52a0;
  }

  .home-focused .process-step h3 {
    grid-area: title;
    margin: .05rem 0 .15rem !important;
    font-size: 1.2rem !important;
  }

  .home-focused .process-step p {
    grid-area: body;
    margin: 0 !important;
    color: #d6ddef !important;
    font-size: .94rem !important;
    line-height: 1.45 !important;
  }

  .site-footer .footer-network {
    display: none !important;
  }
}

@media (max-width: 620px) {
  .announce {
    display: none !important;
  }

  .home-focused .hero-copy .display-xl {
    font-size: clamp(2.35rem, 12vw, 3.55rem) !important;
  }

  .cc-mobile-shortcuts {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-focused .section-head .display-l {
    max-width: 11ch;
  }

  .site-footer .footer-lead {
    gap: 1.2rem !important;
  }
}

@media (max-width: 390px) {
  .home-focused .hero-grid {
    padding-top: 2.15rem !important;
  }

  .home-focused .hero-copy .display-xl {
    font-size: clamp(2.15rem, 12.5vw, 3rem) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-tree,
  .cc-roots {
    transform: none !important;
    will-change: auto !important;
  }
}



/* Final — logo-connected cable network that continues below the hero.
 * It is document-bound rather than fixed, so it scrolls with the page and
 * cannot cover or trap mobile content. */
.cc-roots {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  transform: translate3d(0, var(--cc-root-shift, 0px), 0);
  will-change: transform;
}
.cc-roots[hidden] { display: none !important; }
.cc-roots svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.cc-cable-base,
.cc-cable-progress,
.cc-cable-branch,
.cc-cable-branch-progress {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cc-cable-base {
  stroke: rgba(173,187,218,.13);
}
.cc-cable-progress,
.cc-cable-branch-progress {
  stroke: var(--cc-cable-color, #7091e6);
}
.cc-cable-branch {
  stroke: rgba(173,187,218,.11);
}
.cc-cable-node {
  fill: #263775;
  stroke: var(--cc-cable-color, #7091e6);
  stroke-width: 1.25;
  opacity: .52;
  transition: opacity .35s ease, fill .35s ease;
}
.cc-cable-node.is-active {
  fill: var(--cc-cable-color, #7091e6);
  opacity: .95;
}

@media (min-width: 1181px) and (hover: hover) and (pointer: fine) {
  .cc-cable-progress,
  .cc-cable-branch-progress {
    filter: drop-shadow(0 0 6px rgba(112,145,230,.48));
  }
}

@media (max-width: 1180px), (hover: none), (pointer: coarse) {
  .home-focused {
    isolation: isolate;
  }
  .cc-roots {
    display: block !important;
    z-index: 1;
    opacity: .7;
    transform: translate3d(0, var(--cc-root-shift, 0px), 0);
    will-change: transform;
    contain: layout paint style;
  }
  .cc-roots svg {
    opacity: .74;
  }
  .cc-cable-base {
    stroke: rgba(173,187,218,.1);
  }
  .cc-cable-progress,
  .cc-cable-branch-progress {
    filter: none !important;
  }
  .home-focused > section {
    position: relative;
    z-index: 2;
  }
}

@media (max-width: 620px) {
  .cc-roots { opacity: .58; }
  .cc-roots svg { opacity: .66; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-roots {
    transform: none !important;
    will-change: auto !important;
  }
}