/* Services — "the growth path". A pinned stage: greenhouse-arch cards drift
   around a progress core, then settle onto a rising growth line above a
   seedling-tray grid. services-orbit.js writes transforms and a few custom
   properties only, so scrolling never re-lays out the page. */
.svc { position: relative; height: calc(100svh + 1800px); background: linear-gradient(180deg, var(--page) 0%, #eef7f5 30%, #e9f6f6 100%); }
/* A faint blue–turquoise wash on the pinned stage, so the section has some
   colour and depth without competing with the photo cards. Static layers
   only (no animation, no blur), so it costs nothing while scrolling. */
.svc__pin { position: sticky; top: var(--site-header-height, 0px); height: calc(100svh - var(--site-header-height, 0px)); min-height: 560px; overflow: hidden; background:
  radial-gradient(ellipse 46rem 30rem at 50% 44%, rgba(131,223,56,.08), transparent 70%),
  radial-gradient(ellipse 38rem 30rem at 88% 12%, rgba(67,196,232,.13), transparent 70%),
  radial-gradient(ellipse 40rem 32rem at 8% 86%, rgba(40,190,175,.12), transparent 70%),
  radial-gradient(ellipse 30rem 22rem at 6% 10%, rgba(19,142,175,.06), transparent 70%),
  linear-gradient(160deg, rgba(232,249,253,.7) 0%, rgba(236,248,244,0) 45%, rgba(224,246,242,.65) 100%); }
.svc__stage { position: relative; width: 100%; height: 100%; }

/* Dashed planting track (ring phase). Size and fade are set from JS. */
.svc__track { position: absolute; top: var(--track-y, 50%); left: 50%; width: var(--track-d, 0px); height: var(--track-d, 0px); border: 1.5px dashed rgba(19,122,80,.22); border-radius: 50%; opacity: var(--track-alpha, 1); transform: translate(-50%, -50%) rotate(var(--track-rot, 0deg)); pointer-events: none; }
.svc__track::after { position: absolute; top: -5px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 5px rgba(131,223,56,.18); content: ''; }

/* Progress core in the middle of the ring. */
.svc__core { position: absolute; top: 50%; left: 50%; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: var(--core-d, 230px); height: var(--core-d, 230px); text-align: center; opacity: var(--core-alpha, 1); transform: translate(-50%, -50%) scale(var(--core-scale, 1)); pointer-events: none; }
.svc__core-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.svc__core-ring circle { fill: rgba(255,255,255,.55); stroke: rgba(19,122,80,.12); stroke-width: 1.2; }
.svc__core-ring .svc__core-fill { fill: none; stroke: var(--green-700); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: var(--core-progress, 100); }
.svc__core-leaf { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--green-900); background: var(--green-100); }
.svc__core-leaf svg { width: 18px; height: 18px; }
.svc__core strong { position: relative; color: var(--ink); font-family: var(--font-display); font-size: clamp(19px, min(2.4vw, 4.2vh), 34px); font-weight: 900; letter-spacing: -.4px; line-height: 1.3; }
.svc__core-hint { position: relative; color: var(--muted); font-family: var(--font-display); font-size: 12px; font-weight: 600; }

/* Rising growth line under the cards (line phase). */
.svc__growth { position: absolute; top: 0; left: 0; z-index: 1; width: var(--growth-w, 0px); height: 3px; border-radius: 3px; background: linear-gradient(270deg, rgba(131,223,56,0), var(--lime) 18%, var(--green-700) 70%, rgba(19,122,80,0)); opacity: var(--growth-alpha, 0); transform: translate3d(var(--growth-x, 0px), var(--growth-y, 0px), 0) rotate(var(--growth-rot, 0deg)) scaleX(var(--growth-scale, 0)); transform-origin: center; pointer-events: none; }

/* Greenhouse-arch photo cards. */
.svc__ring { position: absolute; inset: 0; z-index: 2; }
.svc-card { --w: var(--svc-card-w, 150px); position: absolute; top: 0; left: 0; width: var(--w); aspect-ratio: 2 / 3; padding: 0; border: 0; border-radius: 50% 50% 18px 18px / 30% 30% 18px 18px; background: none; cursor: pointer; opacity: var(--alpha, 1); transform: translate(-50%, -50%); will-change: transform; -webkit-tap-highlight-color: transparent; }
.svc-card__inner { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; background: #cfdcd2; box-shadow: 0 14px 30px rgba(7,59,40,.18), 0 2px 6px rgba(7,59,40,.1); transition: box-shadow .4s ease; }
.svc-card__inner img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Soft veil on cards out of focus (only the veil's opacity changes). */
.svc-card__inner::after { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(240,247,242,.9), rgba(240,247,242,.75)); content: ''; opacity: var(--fade, 0); pointer-events: none; }
.svc-card__inner::before { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; height: 45%; background: linear-gradient(0deg, rgba(4,30,19,.7), rgba(4,30,19,0)); content: ''; pointer-events: none; }
.svc-card__num { position: absolute; z-index: 2; top: 9%; left: 50%; display: grid; place-items: center; min-width: 30px; height: 22px; padding: 0 7px; border-radius: 999px; color: var(--green-900); background: rgba(255,255,255,.9); font-family: var(--font-display); font-size: 11.5px; font-weight: 800; transform: translateX(-50%); }
.svc-card__tag { position: absolute; z-index: 2; right: 0; bottom: 11px; left: 0; padding: 0 8px; color: #fff; font-family: var(--font-display); font-size: 13.5px; font-weight: 800; line-height: 1.35; text-align: center; text-shadow: 0 1px 6px rgba(0,0,0,.35); text-wrap: balance; }
.svc-card.is-active .svc-card__inner { box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px var(--lime), 0 20px 44px rgba(19,122,80,.38); }
.svc-card.is-active .svc-card__num { color: var(--green-950); background: var(--lime); }
.svc-card:focus-visible { outline: none; }
.svc-card:focus-visible .svc-card__inner { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--orange); }

/* Panel: intro copy beside a seedling-tray grid of services. */
.svc__panel { position: absolute; right: 0; bottom: 0; left: 0; z-index: 3; display: grid; grid-template-columns: auto minmax(0, 760px); justify-content: center; align-items: center; gap: 40px; padding: 0 32px 5vh; opacity: var(--panel-alpha, 0); transform: translateY(calc((1 - var(--panel-alpha, 0)) * 36px)); pointer-events: none; }
.svc__panel.is-live { pointer-events: auto; }
.svc__eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--green-700); font-family: var(--font-display); font-size: 13px; font-weight: 700; }
.svc__eyebrow span { width: 26px; height: 2px; border-radius: 9px; background: linear-gradient(270deg, var(--lime), var(--sky)); }
.svc__title { margin: 0 0 10px; color: var(--ink); font-family: var(--font-display); font-size: clamp(28px, 2.9vw, 44px); font-weight: 900; letter-spacing: -.6px; line-height: 1.25; }
.svc__title em { display: block; font-style: normal; background: linear-gradient(100deg, var(--green-700), #2fa36b 55%, var(--sky-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.svc__desc { min-height: 3.8em; margin: 12px 0 8px; color: var(--muted); font-size: 15px; line-height: 1.9; }
.svc__link { display: inline-flex; align-items: center; gap: 6px; color: var(--green-700); font-family: var(--font-display); font-size: 14px; font-weight: 800; }
.svc__link span { transition: transform .3s ease; }
.svc__link:hover span { transform: translateX(-4px); }

/* The tray: a frame with 5×2 plug cells. */
.svc__tray { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: 10px; border-radius: 22px; background: linear-gradient(180deg, #1d2a22, #142019); box-shadow: inset 0 2px 0 rgba(255,255,255,.06), 0 18px 40px rgba(7,59,40,.22); }
.svc-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 92px; padding: 10px 6px; border: 0; border-radius: 14px; color: #dfeee4; background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.07), transparent 70%), #26352c; box-shadow: inset 0 3px 8px rgba(0,0,0,.35); cursor: pointer; font-family: var(--font-display); transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease; }
.svc-cell:hover { color: #fff; background: radial-gradient(circle at 50% 30%, rgba(131,223,56,.18), transparent 70%), #2b3d31; transform: translateY(-2px); }
.svc-cell__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--lime); background: rgba(131,223,56,.12); transition: background .3s ease, color .3s ease, transform .3s ease; }
.svc-cell__icon svg { width: 17px; height: 17px; }
.svc-cell__name { font-size: 13px; font-weight: 800; line-height: 1.35; text-align: center; }
.svc-cell__en { color: rgba(223,238,228,.4); font-family: Tahoma, sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .8px; }
.svc-cell.is-active { color: #05261a; background: linear-gradient(160deg, #c4f58c, var(--lime)); box-shadow: 0 8px 20px rgba(131,223,56,.35); }
.svc-cell.is-active .svc-cell__icon { color: #fff; background: var(--green-900); transform: scale(1.06); }
.svc-cell.is-active .svc-cell__en { color: rgba(5,38,26,.55); }

/* Theme parity: the service journey is a full-bleed section, so its layered
   stage must move with the page theme instead of keeping the light wash. */
[data-theme="dark"] .svc { background: linear-gradient(180deg, var(--page) 0%, #0a2419 30%, #071a12 100%); }
[data-theme="dark"] .svc__pin { background:
  radial-gradient(ellipse 46rem 30rem at 50% 44%, rgba(164,232,121,.08), transparent 70%),
  radial-gradient(ellipse 38rem 30rem at 88% 12%, rgba(113,216,239,.1), transparent 70%),
  radial-gradient(ellipse 40rem 32rem at 8% 86%, rgba(40,190,175,.09), transparent 70%),
  linear-gradient(160deg, rgba(23,61,45,.78) 0%, rgba(7,26,18,0) 48%, rgba(10,36,25,.88) 100%); }
[data-theme="dark"] .svc__track { border-color: rgba(113,216,239,.24); }
[data-theme="dark"] .svc__core-ring circle { fill: rgba(13,36,26,.72); stroke: rgba(113,216,239,.18); }
[data-theme="dark"] .svc__core-leaf { color: var(--lime); background: var(--green-100); }
[data-theme="dark"] .svc-card__inner { background: #173d2d; box-shadow: 0 14px 30px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.2); }
[data-theme="dark"] .svc-card__inner::after { background: linear-gradient(180deg, rgba(7,26,18,.86), rgba(7,26,18,.7)); }
[data-theme="dark"] .svc-card__num { color: var(--ink); background: rgba(13,36,26,.92); }
[data-theme="dark"] .svc-card.is-active .svc-card__inner { box-shadow: 0 0 0 3px #0d241a, 0 0 0 5.5px var(--lime), 0 20px 44px rgba(0,0,0,.38); }
[data-theme="dark"] .svc-card:focus-visible .svc-card__inner { box-shadow: 0 0 0 3px #0d241a, 0 0 0 6px var(--orange); }
[data-theme="dark"] .svc__tray { background: linear-gradient(180deg, #102c20, #0b2117); box-shadow: inset 0 2px 0 rgba(255,255,255,.06), 0 18px 40px rgba(0,0,0,.3); }
[data-theme="dark"] .svc-cell { color: #dcefe2; background: radial-gradient(circle at 50% 30%, rgba(164,232,121,.08), transparent 70%), #173d2d; }
[data-theme="dark"] .svc-cell:hover { color: #f4fff8; background: radial-gradient(circle at 50% 30%, rgba(164,232,121,.16), transparent 70%), #1d4c38; }
[data-theme="dark"] .svc-cell__en { color: rgba(220,239,226,.46); }
[data-theme="dark"] .svc-cell.is-active { color: #061d14; background: linear-gradient(160deg, #c4f58c, var(--lime)); }

@media (max-width: 1180px) {
  .svc__panel { grid-template-columns: auto minmax(0, 1fr); gap: 24px; }
  .svc-cell { min-height: 80px; }
  .svc-cell__en { display: none; }
}

@media (max-width: 820px) {
  .svc { height: calc(100svh + 1400px); }
  .svc-card__tag { bottom: 7px; font-size: 11px; }
  .svc-card__num { min-width: 24px; height: 18px; font-size: 9.5px; }
  .svc__core-leaf { width: 28px; height: 28px; }
  .svc__panel { grid-template-columns: 1fr; gap: 12px; padding: 0 14px calc(14px + env(safe-area-inset-bottom)); }
  .svc__intro { text-align: center; }
  .svc__title { font-size: clamp(22px, 6.6vw, 28px); }
  .svc__title em { display: inline; }
  .svc__desc { min-height: 0; margin: 6px 0 2px; font-size: 13px; }
  .svc__link { font-size: 13px; }
  .svc__tray { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 7px; border-radius: 16px; }
  .svc-cell { min-height: 62px; gap: 3px; padding: 6px 2px; border-radius: 10px; }
  .svc-cell__icon { width: 24px; height: 24px; }
  .svc-cell__icon svg { width: 13px; height: 13px; }
  .svc-cell__name { font-size: 10.5px; }
}