/* Shared photographic hero for services and products, using the home palette. */
.cred-content .service-hero p,.cred-content .service-hero figure{margin:0}
:is(.ws-page, .cred-content) .service-hero{display:block;min-height:820px;padding:132px 0 64px;background:var(--bg);isolation:isolate}
.service-hero-photo,.service-hero-shade{position:absolute;inset:0;pointer-events:none}
.service-hero-photo{z-index:0}
.service-hero-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:72% 35%;filter:brightness(.65) saturate(.8)}
.service-hero-shade{z-index:1;background:linear-gradient(90deg,#000f17 0%,#000f17f5 26%,#000f17dd 43%,#000f1740 64%,#000f1700 82%),linear-gradient(0deg,var(--bg),#000f1700 32%)}
.service-hero-inner{position:relative;z-index:2;width:100%}

.service-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.9fr);align-items:center;gap:56px}
.service-hero-grid>*{min-width:0}
:is(.ws-page, .cred-content) .service-hero .h1{font-size:clamp(44px,4.6vw,68px);max-width:660px;line-height:1.03;letter-spacing:-.046em}
:is(.ws-page, .cred-content) .service-hero .htag{font-size:11px;line-height:1.65;letter-spacing:.19em;margin-bottom:24px}
:is(.ws-page, .cred-content) .service-hero .hsub{font-size:18px;line-height:1.65;margin-top:26px;max-width:560px;color:var(--muted)}
:is(.ws-page, .cred-content) .service-hero .hcta{flex-direction:column;align-items:flex-start;gap:20px;margin-top:30px}
:is(.ws-page, .cred-content) .service-hero .home-hero-note{font-size:12px;max-width:440px;margin-top:26px;align-items:flex-start}
.service-hero .home-hero-note:before{margin-top:6px}
.service-hero .ws-text-link{display:inline-flex;align-items:center;gap:13px;color:var(--acc);font-size:14px;font-weight:600;text-underline-offset:5px;text-decoration:none;line-height:1.5}
.service-hero .ws-text-link:hover{text-decoration:underline}
.service-hero .ws-text-link span{font-size:20px;line-height:1}
.service-hero-composition{position:relative;align-self:end;justify-self:end;width:100%;max-width:430px;padding:0 0 0 22px}
.service-hero-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:var(--acc-soft);color:var(--acc);flex:none}
.service-hero-icon svg,.service-hero-flow-icon svg,.service-hero-control svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.service-hero-workflow-head strong{display:block;font-size:14px;font-weight:600;line-height:1.4;color:var(--ink)}
.service-hero-workflow-head div>span{display:block;margin-top:3px;font-size:11px;color:var(--muted);line-height:1.5}
.service-hero-workflow{padding:22px 20px 0;background:rgba(9,28,38,.95);border:1px solid var(--line);border-radius:12px;box-shadow:0 24px 65px #000f1726;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.service-hero-workflow-head{display:flex;align-items:center;gap:10px}
.service-hero-example{font-size:9px;line-height:1.5;color:var(--muted);padding:4px 7px;border:1px solid var(--line);border-radius:5px;margin-left:auto;max-width:65px;text-align:center}
.service-hero-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;padding:0;margin:24px 0 22px;gap:12px}
.service-hero-flow li{position:relative;text-align:center;line-height:1.5;font-size:12px;color:var(--ink)}
.service-hero-flow-icon{display:grid;place-items:center;position:relative;width:38px;height:38px;margin:0 auto 11px;border:1px solid var(--acc-line);border-radius:10px;background:var(--acc-soft);color:var(--acc)}
.service-hero-flow li:not(:last-child):after{content:'→';position:absolute;top:8px;right:-15px;width:18px;color:var(--acc);font-size:16px;line-height:1.3}
.service-hero-control{display:flex;align-items:center;gap:9px;margin:0 -20px;padding:13px 20px;border-top:1px solid var(--line-soft);background:var(--acc-soft);border-radius:0 0 11px 11px;font-size:11px;line-height:1.5;color:var(--acc)}
.service-hero-control svg{width:16px;height:16px;flex:none}
.service-hero-benefits{background:var(--bg)}
.service-hero-benefits .ws-value-strip{margin-top:0}
html[data-theme="light"] .service-hero-photo img{filter:none}
html[data-theme="light"] .service-hero-shade{background:linear-gradient(90deg,#f8faf9 0%,#f8faf9f5 27%,#f8faf9db 43%,#f8faf94d 59%,#f8faf900 73%),linear-gradient(0deg,var(--bg),#f8faf900 30%)}
html[data-theme="light"] .service-hero-workflow{background:rgba(255,255,255,.95)}
:is(.ws-page, .cred-content) .service-hero .hsub strong{font-weight:500;color:var(--ink)}
@media(max-width:1100px){
  :is(.ws-page, .cred-content) .service-hero{min-height:780px;padding-top:122px}
  .service-hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px}
  .service-hero-composition{padding-left:0}
  :is(.ws-page, .cred-content) .service-hero .h1{font-size:clamp(43px,4.6vw,52px)}
  :is(.ws-page, .cred-content) .service-hero .hsub{font-size:17px}
}
/* Integrated photographic mobile hero, shared by services and products. */
@media (max-width: 860px) {
  .service-hero .service-hero-composition,
  .service-hero .home-hero-note,
  .service-hero .hcta .ws-text-link { display: none; }
  :is(.ws-page, .cred-content) .service-hero { padding: 104px 0 36px; min-height: 0; }
  .service-hero-photo { top: 64px; bottom: auto; height: 470px; }
  .service-hero-photo img { object-position: 78% top; }
  .service-hero-shade {
    background: linear-gradient(90deg, #000f17fa 0%, #000f17e8 40%, #000f1780 72%, #000f1740),
      linear-gradient(180deg, #000f1700 250px, var(--bg) 510px);
  }
  html[data-theme="light"] .service-hero-shade {
    background: linear-gradient(90deg, #f8faf9fc 0%, #f8faf9eb 40%, #f8faf980 72%, #f8faf940),
      linear-gradient(180deg, #f8faf900 250px, var(--bg) 510px);
  }
  .service-hero-copy { max-width: 100%; }
  .service-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  :is(.ws-page, .cred-content) .service-hero .h1 { max-width: 14ch; font-size: clamp(38px, 7vw, 52px); line-height: 1.06; }
  :is(.ws-page, .cred-content) .service-hero .htag { margin-bottom: 18px; }
  :is(.ws-page, .cred-content) .service-hero .hsub { max-width: 540px; margin-top: 24px; }
  :is(.ws-page, .cred-content) .service-hero .hcta { margin-top: 24px; gap: 16px; }
  :is(.ws-page, .cred-content) .service-hero .home-hero-note { margin-top: 20px; }
  .service-hero-composition { width: 100%; max-width: 430px; justify-self: start; }
  .service-hero-workflow { box-shadow: 0 12px 32px #000f1712; }
}
@media (max-width: 560px) {
  :is(.ws-page, .cred-content) .service-hero { padding-top: 96px; }
  .service-hero-photo { height: 420px; }
  :is(.ws-page, .cred-content) .service-hero .htag { font-size: 10px; letter-spacing: .15em; }
  :is(.ws-page, .cred-content) .service-hero .hcta .btn { width: 100%; font-size: 11px; padding-inline: 16px; }
  .service-hero-workflow { padding: 20px 16px 0; }
  .service-hero-control { margin-inline: -16px; padding-inline: 16px; }
  .service-hero-flow { gap: 8px; }
  .service-hero-flow li { font-size: 11px; }
  .service-hero-flow li:not(:last-child):after { right: -13px; }
  .service-hero-photo img { object-position: 76% top; }
  :is(.ws-page, .cred-content) .service-hero .h1 { font-size: clamp(36px, 9.4vw, 46px); }
  :is(.ws-page, .cred-content) .service-hero .hsub { font-size: 16px; line-height: 1.6; }
}