/* The browser stays anchored to its artwork slot; its woven current spans the
   whole section. Packages and the established content layout are kept. */
.services.has-webgl .services-glass-fallback,
.services.has-webgl .art-aura { display:none; }
.services-scene[data-art-version^="woven-browser-"] { filter:none; }

/* Keep the new woven browser readable on portrait phones without dropping a
   package, price or link. The smaller phone keeps its existing compact cards. */
@media (max-width:700px) and (orientation:portrait) and (min-height:741px) {
  .services-packages .service-card {
    height:150px;
    padding:10px;
    grid-template-columns:29% minmax(0,1fr);
    column-gap:7px;
    row-gap:4px;
  }
  .service-card-copy {gap:4px}
  .service-card-copy h3 {font-size:12px;line-height:1.2}
  .service-card-copy p {font-size:11px;line-height:1.3}
  .services-packages .service-action {font-size:9px;line-height:1.3;padding-bottom:3px}
  .service-price {font-size:11px;line-height:1.3}
  .services .service-icon {min-height:40px}
}
@media (max-width:700px) and (orientation:portrait) and (max-height:740px) {
  .services-packages .service-card {height:125px}
}
@media (max-width:700px) and (orientation:portrait) and (max-height:740px) {
  .services-packages .service-action span {font-size:13px;line-height:1}
}

/* The wide weave lives on the same destination plane as the copy and cards.
   Its local bounds are fitted in JS; the journey transforms their common parent. */
.services-inner > .services-scene.services-scene-wide {
  position:absolute;
  right:auto;
  bottom:auto;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  filter:none;
}
.services.has-webgl .services-inner {z-index:1}
.services.has-webgl .services-copy {text-shadow:0 2px 12px #0008}

/* During the camera trip the page edges are visible: dissolve the threads at
   those edges instead of exposing a hard rectangular canvas boundary. At rest
   the cloth keeps reaching both sides of the viewport. */
.services[inert] .services-inner > .services-scene.services-scene-wide {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

/* The copy sets the minimum height of the opening row. It must never be
   squeezed behind the package cards when the viewport gets shorter. */
.journey-ready .services { overflow-x:hidden; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#3a778d #02050a; }
.journey-ready .services-inner {
  grid-template-rows:minmax(min-content,1fr) auto auto auto;
  overflow:visible;
}
.services-intro { min-height:min-content; }
.services-copy { min-width:0; }
.services .service-grid { grid-auto-rows:1fr; align-items:stretch; }
.services-packages .service-card {
  height:auto;
  min-height:var(--service-card-height,clamp(172px,27svh,245px));
  grid-template-rows:minmax(min-content,1fr) auto auto;
}

/* Lower desktop windows retain four equally sized cards. Reduce the empty
   spacing first, then the art and type together, with readable lower limits. */
@media (min-width:701px) and (max-height:760px) {
  .services-inner { gap:10px; }
  .services .eyebrow { font-size:9px; line-height:1.4; margin-bottom:7px; }
  .services h2 { font-size:clamp(24px,min(3.5vw,5dvh),38px); line-height:1.15; }
  .services-description { font-size:clamp(12px,min(1.4vw,2.15dvh),16px); line-height:1.4; margin:10px 0 12px; }
  .services .button-primary { font-size:13px; line-height:1.3; min-height:36px; padding:8px 20px; }
  .services .button-primary span { font-size:22px; line-height:1; }
  .services-packages .service-card {
    --service-card-height:clamp(140px,24dvh,180px);
    padding:12px;
    grid-template-columns:26% minmax(0,1fr);
    column-gap:9px;
    row-gap:5px;
  }
  .services .service-icon { min-height:42px; }
  .services .service-card-copy { gap:5px; }
  .services .service-card-copy h3 { font-size:clamp(13px,1.3vw,18px); line-height:1.25; }
  .services .service-card-copy p { font-size:clamp(11px,1vw,14px); line-height:1.35; }
  .services .service-price { font-size:clamp(11px,1vw,14px); line-height:1.3; }
  .services-packages .service-action { font-size:clamp(10px,.92vw,13px); line-height:1.35; padding-bottom:4px; }
  .services-packages .service-action span { font-size:18px; line-height:1; }
  .services .packages-discount { font-size:11px; margin-top:7px; }
  .services-process { min-height:32px; padding-top:10px; gap:20px; }
  .services-process li { font-size:12px; gap:10px; }
  .services-process li:not(:last-child)::after { font-size:18px; }
  .services-process .process-label { font-size:8px; }
}

@media (min-width:701px) and (max-height:540px) {
  .services-inner { gap:9px; }
  .services h2 { font-size:clamp(22px,4.8dvh,26px); }
  .services .eyebrow { margin-bottom:4px; }
  .services-description { margin:7px 0 9px; font-size:12px; }
  .services .button-primary { min-height:34px; padding:7px 18px; font-size:12px; }
  .services .service-grid { gap:12px; }
  .services-packages .service-card { height:auto; min-height:142px; padding:10px; }
  .services-process { padding-top:8px; min-height:28px; }
  .services-process li { font-size:11px; gap:6px; }
  .services-process .process-label { margin:0; }
}

/* Narrow windows need taller copy rows, not overlapping text. Native section
   scrolling takes over only if the complete, readable composition cannot fit. */
@media (max-width:1000px) and (min-width:701px) and (orientation:portrait) {
  .services-packages .service-card { min-height:clamp(150px,18dvh,190px); }
}
@media (max-width:700px) and (orientation:portrait) {
  .services-packages .service-card { --service-card-height:150px; }
  .services-intro { grid-template-rows:auto minmax(110px,1fr); }
  .services-art { min-height:110px; }
}
@media (max-width:700px) and (orientation:portrait) and (max-height:740px) {
  .services-packages .service-card { --service-card-height:125px; }
}
@media (max-width:700px) and (orientation:landscape) {
  .services-packages .service-card { --service-card-height:142px; }
}