/* Services route: hero with a reserved film slot, alternating story rows, service tiles, process, bands and track cards. */
#content-panel .svc-page{--svc-ink:#0d1110;--svc-muted:#4d5856;--svc-teal:#007a6a;--svc-soft:#f3f5f4}
#content-panel .svc-page .hb-btn{color:#001b16;font-family:inherit}
#content-panel .svc-page .hb-btn-dark{color:#fff}
#content-panel .svc-block{margin-top:clamp(56px,8vw,104px)}
#content-panel .svc-page h3{font-weight:700;letter-spacing:-.01em}
#content-panel .svc-title{font-size:var(--fs-h2);line-height:1.3}
#content-panel .svc-bar::after{content:"";display:block;width:min(300px,60%);height:3px;margin-top:20px;background:var(--content-accent)}
#content-panel .svc-center{text-align:center}
#content-panel .svc-center.svc-bar::after{margin-inline:auto}
#content-panel .svc-lede{max-width:760px;margin-top:18px;font-size:var(--fs-lg);font-style:normal;line-height:1.85;color:#c9d1ce}
#content-panel .svc-center+.svc-lede,#content-panel .svc-lede.svc-center{margin-inline:auto}

/* Hero */
#content-panel .svc-hero{position:relative;display:grid;gap:22px;padding:18px;overflow:hidden;isolation:isolate}
#content-panel .svc-hero::before{content:"";position:absolute;inset:0 0 -8%;z-index:-1;background:#111 url("case-shanyu.webp") center/cover;filter:grayscale(1) brightness(.45)}
#content-panel .svc-hero-copy{display:grid;align-content:end;gap:16px;padding:34px 28px 48px;background:linear-gradient(120deg,rgba(0,226,193,.94),rgba(0,168,143,.94));color:#001b16;clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),0 100%)}
#content-panel .svc-hero h2{font-size:var(--fs-h1);font-weight:700;line-height:1.3;letter-spacing:.02em;color:#001b16}
#content-panel .svc-hero-sub{max-width:34em;font-size:var(--fs-base);font-style:normal;font-weight:500;line-height:1.85;color:#00352d}
#content-panel .svc-hero-copy .hb-btn{justify-self:start;background:#0b100f;color:#fff}
#content-panel .svc-hero-video{position:relative;display:grid;place-content:center;justify-items:center;gap:12px;aspect-ratio:16/9;margin:0;border:1px solid rgba(244,242,239,.28);background:#000;text-align:center}
#content-panel .svc-hero-video::before,#content-panel .svc-hero-video::after{content:"";position:absolute;z-index:1;width:22px;height:22px;pointer-events:none}
#content-panel .svc-hero-video::before{top:10px;left:10px;border-top:1px solid var(--content-accent);border-left:1px solid var(--content-accent)}
#content-panel .svc-hero-video::after{right:10px;bottom:10px;border-right:1px solid var(--content-accent);border-bottom:1px solid var(--content-accent)}
#content-panel .svc-hero-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
#content-panel .svc-hero-video .hb-reel-controls{z-index:2}
#content-panel .svc-hero-video.is-portrait{justify-self:center;width:min(100%,calc((100svh - var(--site-header-h,120px) - var(--hb-nav-h,0px) - 24px)*9/16));aspect-ratio:9/16}

/* Client strip reuses the home strip styling. */

/* Story rows */
#content-panel .svc-rows{display:grid;gap:44px}
#content-panel .svc-row{display:grid}
#content-panel .svc-row img{display:block;width:100%;height:auto;aspect-ratio:11/8;object-fit:cover;object-position:top}
#content-panel .svc-row-copy{padding:30px 26px;background:var(--svc-soft);color:var(--svc-ink)}
#content-panel .svc-row-copy h3{font-size:var(--fs-h2);line-height:1.3}
#content-panel .svc-row-copy h3::after{content:"";display:block;width:96px;height:3px;margin-top:18px;background:var(--content-accent)}
#content-panel .svc-row-copy p{margin-top:18px;font-size:var(--fs-base);font-weight:400;line-height:1.75;color:var(--svc-muted)}

/* All services */
#content-panel .svc-all{padding:clamp(40px,6vw,72px) clamp(20px,4vw,56px);background:#fff;color:var(--svc-ink)}
#content-panel .svc-all .svc-lede{color:var(--svc-muted)}
#content-panel .svc-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px;margin:40px 0 0;padding:0;list-style:none}
#content-panel .svc-tiles a{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 4px;border-bottom:1px solid #e3e8e6;font-size:var(--fs-base);font-weight:600;line-height:1.4;color:var(--svc-ink);transition:color .2s}
#content-panel .svc-tiles svg{flex:none;width:26px;height:26px;fill:none;stroke:var(--svc-teal);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Process */

/* Call-to-action band */

/* Case banner */
#content-panel .svc-case{display:grid;justify-items:center;gap:10px;padding:clamp(56px,8vw,96px) 24px;background:#000 repeating-radial-gradient(circle at 20% 120%,rgba(0,217,186,.08) 0 1px,transparent 1px 22px);text-align:center}
#content-panel .svc-case p{font-size:var(--fs-sm);font-weight:700;letter-spacing:.14em;color:var(--content-accent)}
#content-panel .svc-case strong{font-size:var(--fs-h1);font-weight:800;line-height:1.1;letter-spacing:.04em;color:transparent;-webkit-text-stroke:1.5px #f4f2ef}
#content-panel .svc-case h3{font-size:var(--fs-h2)}
#content-panel .svc-case .hb-btn{margin-top:14px}

/* Track cards */
#content-panel .svc-cards{display:grid;gap:40px}
#content-panel .svc-cards article{display:grid;justify-items:center;gap:14px;text-align:center}
#content-panel .svc-cards img{display:block;width:100%;height:auto;aspect-ratio:7/5;object-fit:cover;object-position:top}
#content-panel .svc-cards h3{margin-top:10px;font-size:var(--fs-h2)}
#content-panel .svc-cards p{max-width:30em;font-size:var(--fs-base);line-height:1.75;color:#c3ccc9}

@media(hover:hover) and (pointer:fine){
  #content-panel .svc-tiles a:hover{color:var(--svc-teal)}
  #content-panel .svc-page .hb-btn:hover{color:var(--content-accent)}
  #content-panel .svc-hero-copy .hb-btn:hover{background:transparent;border-color:#001b16;color:#001b16}
}
@media(min-width:700px){
  html:not([data-view="mobile"]) #content-panel .svc-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  html:not([data-view="mobile"]) #content-panel .svc-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:960px){
  html:not([data-view="mobile"]) #content-panel .svc-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:0;min-height:520px;padding:0}
  html:not([data-view="mobile"]) #content-panel .svc-hero-copy{align-self:stretch;padding:64px 88px 64px 48px;clip-path:polygon(0 0,100% 0,84% 100%,0 100%)}
  html:not([data-view="mobile"]) #content-panel .svc-hero-video{margin:40px 40px 40px 0}
  html:not([data-view="mobile"]) #content-panel .svc-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
  html:not([data-view="mobile"]) #content-panel .svc-row img{position:relative;z-index:1;margin-right:-56px;width:calc(100% + 56px)}
  html:not([data-view="mobile"]) #content-panel .svc-row-copy{padding:64px 56px 64px 104px}
  html:not([data-view="mobile"]) #content-panel .svc-row.is-flip img{order:2;margin:0 0 0 -56px}
  html:not([data-view="mobile"]) #content-panel .svc-row.is-flip .svc-row-copy{padding:64px 104px 64px 56px;text-align:right}
  html:not([data-view="mobile"]) #content-panel .svc-row.is-flip h3::after{margin-left:auto}
  html:not([data-view="mobile"]) #content-panel .svc-tiles{grid-template-columns:repeat(6,minmax(0,1fr))}
  html:not([data-view="mobile"]) #content-panel .svc-tiles a{flex-direction:column;align-items:flex-start;justify-content:center;min-height:104px;border:0}
}
@media(prefers-reduced-motion:reduce){#content-panel .svc-tiles a{transition:none}}