/* =========================================================
   HUMANBOTS — SHARED SERVICE PAGE STYLES
   Loaded on every /our-service/<name>/ page, after global.css
   and before the page's own stylesheet.

   Contents
   1. Page wrapper + tokens
   2. Layout: container, section, section head
   3. Type: label, title, lede, mono
   4. Buttons, tags, chips
   5. Hero base
   6. Word-fill statement   (.svc-fill, driven by service.js)
   7. Process timeline      (.svc-process, driven by service.js)
   8. Inline CTA bar        (.svc-inline-cta)
   9. Split layout          (.svc-split: sticky intro left, content right)
  10. Centered blocks       (.svc-center)
  11. Responsive + reduced motion
  12. Tabs                 (.svc-tabs, driven by service.js)
  13. Card grid            (.svc-grid of .svc-card: bordered 3-column grid)
      + .svc-icon (round outlined icon used on cards)
  14. Card drawings        (.svc-art: small pictures for the top of a card)
  15. Tabs as a row        (.svc-tabs-row: pill tabs above the panels)
  16. Accordion            (.svc-acc, driven by service.js)
  17. Orange block         (.svc-orange + .svc-btn--dark)
  18. Problem cards        (.svc-pains / .svc-pain + .svc-answer)
  19. Comparison table     (.svc-diff, .svc-compare, .svc-mark)
  20. Quote, capability cards, 4-step strip (.svc-quote, .svc-help, .svc-loop)
      + .svc-grid--2 (two-column card grid)

   Wrap the page in <div class="hb-svc" id="hb-<name>-page">.
========================================================= */


/* ---------- 1. WRAPPER + TOKENS ---------- */

.hb-svc{
  --line:#242424;
  --soft-line:#171717;
  --card:#050505;
  --text:#b7b7b7;
  --dim:#777;
  --grey-head:#5c5c5c;
  --font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  background:#000;
  color:var(--white);
  overflow-x:clip; /* clip, not hidden, so sticky sections still work */
}

/* zero-specificity reset so section rules can set margins */
:where(.hb-svc) :where(h1,h2,h3,p){margin:0}

.hb-svc section{scroll-margin-top:110px}


/* ---------- 2. LAYOUT ---------- */

.svc-container{
  width:min(1180px, calc(100% - 40px));
  margin:0 auto;
}

.svc-section{
  padding:110px 0 120px;
  border-top:1px solid var(--soft-line);
}

/* heading left, intro text right */
.svc-head{
  display:grid;
  grid-template-columns:1fr .7fr;
  gap:60px;
  align-items:end;
  margin-bottom:56px;
}


/* ---------- 3. TYPE ---------- */

.svc-label{
  display:flex;
  align-items:center;
  gap:11px;
  color:var(--orange);
  font-family:var(--font-body); /* same look when used on a heading */
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.svc-label::before{
  content:"";
  width:26px;
  height:1px;
  background:var(--orange);
}
/* centered label with a line on both sides */
.svc-label--center{justify-content:center}
.svc-label--center::after{
  content:"";
  width:26px;
  height:1px;
  background:var(--orange);
}

.svc-title{
  margin-top:14px;
  color:#fff;
  font-size:clamp(34px, 4.4vw, 58px);
  line-height:1;
  font-weight:650;
  letter-spacing:-.045em;
}
.svc-title span{display:block;color:var(--grey-head)}

.svc-lede{
  max-width:470px;
  color:var(--dim);
  font-size:15px;
  line-height:1.8;
}
.svc-lede strong{color:#d0d0d0;font-weight:500}

.svc-mono{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.04em;
}


/* ---------- 4. BUTTONS, TAGS, CHIPS ---------- */

.svc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  min-height:50px;
  padding:0 22px;
  border-radius:100px;
  border:1px solid transparent;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
  font-family:inherit;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.svc-btn span{font-size:15px}
.svc-btn--primary{background:var(--orange);color:#fff}
.svc-btn--primary:hover{transform:translateY(-2px);box-shadow:0 12px 35px rgba(255,77,22,.22)}
.svc-btn--ghost{background:transparent;border-color:var(--line);color:#fff}
.svc-btn--ghost:hover{transform:translateY(-2px);border-color:rgba(255,77,22,.45)}

.hb-svc :is(a, button):focus-visible{outline:2px solid var(--orange);outline-offset:3px}

.svc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.svc-tags span,
.svc-step-tag{
  padding:5px 9px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  color:#666;
  font-size:9px;
  letter-spacing:.06em;
  text-transform:uppercase;
  transition:color .3s ease, border-color .3s ease;
}

/* dot-prefixed inline list */
.svc-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
  margin:28px 0 0;
  padding:0;
  list-style:none;
  color:#666;
  font-size:12px;
}
.svc-chips li{position:relative;padding-left:12px}
.svc-chips li::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:4px;
  height:4px;
  margin-top:-2px;
  border-radius:50%;
  background:var(--orange);
}


/* ---------- 5. HERO BASE ---------- */

.svc-hero{
  position:relative;
  padding:170px 0 90px;
  background:radial-gradient(circle at 75% 40%, rgba(255,77,22,.10), transparent 30%), #000;
}
.svc-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.016) 1px, transparent 1px);
  background-size:90px 90px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.65), transparent 90%);
}

.svc-h1{
  margin:20px 0 28px;
  color:#fff;
  font-size:clamp(42px, 6vw, 78px);
  line-height:.98;
  font-weight:650;
  letter-spacing:-.052em;
}
.svc-h1 span{display:block;color:var(--grey-head)}

.svc-hero-copy{
  max-width:580px;
  color:var(--text);
  font-size:17px;
  line-height:1.75;
}

.svc-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}


/* ---------- 6. WORD-FILL STATEMENT ---------- */
/* Words light up one by one as the section scrolls past.
   Add .is-accent to the words that should end orange.
   Anything with .svc-fill-after appears once the words finish. */

.svc-fill{
  position:relative;
  height:160vh;
  border-top:1px solid var(--soft-line);
}
.svc-fill-sticky{
  position:sticky;
  top:0;
  min-height:100svh;
  display:flex;
  align-items:center;
}
.svc-statement{
  max-width:1100px;
  margin-top:26px;
  font-size:clamp(36px, 5.6vw, 72px);
  line-height:1.05;
  font-weight:650;
  letter-spacing:-.045em;
}
.svc-word{color:#262626;transition:color .15s linear}
.svc-word.is-on{color:#fff}
.svc-word.is-accent.is-on{color:var(--orange)}

.svc-fill-after{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .5s ease, transform .5s ease;
}
.svc-fill-after.is-on{opacity:1;transform:none}
.svc-fill-after .svc-lede{max-width:640px;margin-top:30px}

.svc-fill-foot{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:36px;
  color:#666;
}
.svc-fill-foot::before{content:"";width:34px;height:1px;background:var(--orange)}


/* ---------- 7. PROCESS TIMELINE ---------- */

.svc-process{position:relative;max-width:1000px}
.svc-steps{list-style:none;margin:0;padding:0}

.svc-process-line,
.svc-process-fill{
  position:absolute;
  left:31px;
  top:30px;
  width:1px;
}
.svc-process-line{bottom:30px;background:var(--line)}
.svc-process-fill{
  height:0;
  background:var(--orange);
  box-shadow:0 0 12px rgba(255,77,22,.45);
}

.svc-step{
  position:relative;
  display:grid;
  grid-template-columns:64px 170px minmax(0,1fr);
  grid-template-areas:"dot num body";
  gap:30px;
  padding:22px 0 42px;
  opacity:.35;
  transition:opacity .35s ease;
}
.svc-step.is-on{opacity:1}

.svc-dot{
  grid-area:dot;
  justify-self:center;
  position:relative;
  z-index:1;
  width:13px;
  height:13px;
  margin-top:5px;
  border:1px solid #343434;
  border-radius:50%;
  background:#000;
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.svc-step.is-on .svc-dot{
  background:var(--orange);
  border-color:var(--orange);
  box-shadow:0 0 0 6px rgba(255,77,22,.08), 0 0 18px rgba(255,77,22,.35);
}

.svc-step-num{grid-area:num;color:#555;padding-top:4px;text-transform:uppercase}
.svc-step.is-on .svc-step-num{color:var(--orange)}

.svc-step-body{
  grid-area:body;
  padding-bottom:22px;
  border-bottom:1px solid var(--line);
}
.svc-step-body h3{
  margin-bottom:12px;
  color:#fff;
  font-size:clamp(24px, 2.5vw, 34px);
  line-height:1.05;
  font-weight:580;
  letter-spacing:-.04em;
}
.svc-step-body p{max-width:650px;color:var(--dim);font-size:14px;line-height:1.7}
.svc-step.is-on .svc-step-body p{color:#9a9a9a}
.svc-step-tag{display:inline-block;margin-top:17px}
.svc-step.is-on .svc-step-tag{color:#a5a5a5;border-color:rgba(255,77,22,.2)}


/* ---------- 8. INLINE CTA BAR ---------- */
/* A line of text with a button, closing a section. */

.svc-inline-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  margin-top:56px;
  padding-top:30px;
  border-top:1px solid var(--line);
  color:var(--dim);
  font-size:14px;
  line-height:1.65;
}
.svc-inline-cta p{max-width:640px}
.svc-inline-cta strong{color:#fff;font-weight:500}


/* ---------- 9. SPLIT LAYOUT ---------- */
/* Intro stays pinned on the left while the content on the right scrolls. */

.svc-split{
  display:grid;
  grid-template-columns:340px minmax(0,1fr);
  gap:80px;
  align-items:start;
}
.svc-split-intro{position:sticky;top:130px}
.svc-split-intro .svc-lede{margin-top:22px}
.svc-split-note{
  margin-top:28px;
  padding-top:18px;
  border-top:1px solid var(--line);
  color:#555;
}


/* ---------- 10. CENTERED BLOCKS ---------- */

.svc-center{text-align:center}
.svc-center .svc-hero-copy,
.svc-center .svc-lede{margin-left:auto;margin-right:auto}
.svc-center .svc-actions,
.svc-center .svc-chips,
.svc-center .svc-tags{justify-content:center}


/* ---------- 11. RESPONSIVE ---------- */

@media (max-width:950px){
  .svc-section{padding:85px 0 90px}
  .svc-head{grid-template-columns:1fr;gap:22px;margin-bottom:44px}
  .svc-hero{padding:140px 0 60px}

  .svc-step{
    grid-template-columns:52px minmax(0,1fr);
    grid-template-areas:"dot num" "dot body";
    gap:8px 20px;
  }
  .svc-process-line,
  .svc-process-fill{left:25px}

  .svc-inline-cta{flex-direction:column;align-items:flex-start}

  .svc-split{grid-template-columns:1fr;gap:44px}
  .svc-split-intro{position:static;max-width:640px}
}

@media (max-width:650px){
  .svc-container{width:calc(100% - 30px)}
  .svc-section{padding:70px 0 75px}
  .svc-title{font-size:clamp(34px, 10vw, 42px)}

  .svc-hero{padding:125px 0 40px}
  .svc-h1{font-size:clamp(39px, 12vw, 52px);letter-spacing:-.045em}
  .svc-hero-copy{font-size:15px}
  .svc-actions{flex-direction:column}
  .svc-actions .svc-btn{width:100%}

  .svc-fill{height:140vh}

  .svc-step{grid-template-columns:42px minmax(0,1fr);gap:8px 14px}
  .svc-process-line,
  .svc-process-fill{left:20px}

  .svc-inline-cta .svc-btn{width:100%;white-space:normal;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  .hb-svc *,
  .hb-svc *::before,
  .hb-svc *::after{animation:none !important;transition:none !important}
  .svc-fill{height:auto}
  .svc-fill-sticky{position:static;min-height:0;padding:100px 0}
}


/* ---------- 12. TABS ---------- */
/* A list of tabs on the left, one panel on the right.
   Markup: .svc-tabs > .svc-tabs-list[role=tablist] > .svc-tab[role=tab]
   and a panel per tab: .svc-tab-panel[role=tabpanel]. service.js runs it. */

.svc-tabs{
  display:grid;
  grid-template-columns:minmax(280px, .8fr) minmax(0, 1.2fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.svc-tabs-list{
  padding-right:40px;
  border-right:1px solid var(--line);
}

.svc-tab{
  position:relative;
  width:100%;
  display:grid;
  grid-template-columns:38px 1fr auto;
  gap:12px;
  align-items:center;
  padding:22px 4px;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:none;
  color:#555;
  font-family:var(--font-display);
  font-size:clamp(20px, 2.1vw, 28px);
  font-weight:600;
  letter-spacing:-.035em;
  text-align:left;
  cursor:pointer;
  transition:color .3s ease, padding-left .3s ease;
}
.svc-tab:last-child{border-bottom:0}
.svc-tab .svc-mono{color:#3a3a3a;font-weight:500;letter-spacing:.04em}
.svc-tab::after{
  content:"\2192";
  color:#3a3a3a;
  font-size:16px;
  transform:rotate(-45deg);
  transition:transform .3s ease, color .3s ease;
}
.svc-tab::before{
  content:"";
  position:absolute;
  left:-1px;
  top:50%;
  width:2px;
  height:0;
  background:var(--orange);
  transform:translateY(-50%);
  transition:height .3s ease;
}
.svc-tab:hover{color:#999}
.svc-tab[aria-selected="true"]{padding-left:12px;color:#fff}
.svc-tab[aria-selected="true"] .svc-mono,
.svc-tab[aria-selected="true"]::after{color:var(--orange)}
.svc-tab[aria-selected="true"]::after{transform:none}
.svc-tab[aria-selected="true"]::before{height:35%}

.svc-tab-panel{
  position:relative;
  padding:50px 0 45px 60px;
  animation:svcPanel .38s ease both;
}
.svc-tab-panel[hidden]{display:none}
@keyframes svcPanel{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.svc-tab-panel > .svc-mono{color:var(--orange);text-transform:uppercase}
.svc-tab-panel h3{
  max-width:620px;
  margin:12px 0 16px;
  color:#fff;
  font-size:clamp(30px, 3.4vw, 46px);
  line-height:1;
  font-weight:600;
  letter-spacing:-.045em;
}
.svc-tab-panel > p{max-width:600px;color:var(--dim);font-size:14px;line-height:1.7}

@media (max-width:1000px){
  .svc-tabs{grid-template-columns:1fr}
  .svc-tabs-list{padding-right:0;border-right:0}
  .svc-tab-panel{padding:40px 0 30px}
}

@media (max-width:700px){
  /* tabs become a scrolling pill row */
  .svc-tabs{border-top:0}
  .svc-tabs-list{display:flex;gap:7px;overflow-x:auto;padding-bottom:14px;scrollbar-width:none}
  .svc-tabs-list::-webkit-scrollbar{display:none}
  .svc-tab{
    display:block;
    width:auto;
    flex:0 0 auto;
    padding:10px 14px;
    border:1px solid var(--line);
    border-radius:999px;
    font-family:var(--font-body);
    font-size:12px;
    letter-spacing:0;
  }
  .svc-tab:last-child{border-bottom:1px solid var(--line)}
  .svc-tab[aria-selected="true"]{padding-left:14px;border-color:rgba(255,77,22,.5)}
  .svc-tab .svc-mono,
  .svc-tab::before,
  .svc-tab::after{display:none}
  .svc-tab-panel{padding-top:30px}
}


/* ---------- 13. CARD GRID ---------- */
/* A bordered grid of cards, 3 across. Put the page's own picture or
   icon at the top of each .svc-card; title, text and tags below. */

.svc-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}

.svc-card{
  position:relative;
  min-height:330px;
  padding:30px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:40px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  transition:background .35s ease;
}
.svc-card::before{
  content:"";
  position:absolute;
  right:-110px;
  bottom:-120px;
  width:230px;
  height:230px;
  border-radius:50%;
  background:rgba(255,77,22,.12);
  filter:blur(60px);
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}
.svc-card:hover{background:var(--card)}
.svc-card:hover::before{opacity:1}
.svc-card:hover .svc-tags span{color:#999;border-color:rgba(255,77,22,.18)}

.svc-card h3{
  margin-bottom:12px;
  color:#fff;
  font-size:clamp(21px, 2vw, 24px);
  line-height:1.1;
  font-weight:580;
  letter-spacing:-.035em;
}
.svc-card p{
  max-width:330px;
  color:var(--dim);
  font-size:13px;
  line-height:1.65;
}

@media (max-width:950px){
  .svc-grid{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width:650px){
  .svc-grid{grid-template-columns:1fr}
  .svc-card{min-height:280px;padding:25px}
}

/* round outlined icon for the top of a card */
.svc-icon{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--orange);
  transition:transform .4s ease, border-color .4s ease, background .4s ease;
}
.svc-icon svg{
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.svc-card:hover .svc-icon{
  transform:rotate(-8deg) scale(1.06);
  border-color:rgba(255,77,22,.35);
  background:rgba(255,77,22,.05);
}


/* ---------- 14. CARD DRAWINGS ---------- */
/* Small abstract pictures for the top of a .svc-card.
   Wrap one drawing in <div class="svc-art" aria-hidden="true">.
   Drawings: .svc-art-win (window with .svc-art-dots + .svc-art-bars),
   .svc-art-hub (core with 4 nodes), .svc-art-stack (3 stacked windows),
   .svc-art-rings (core in rings), .svc-art-journey (4 points on a line),
   .svc-art-chart (4 bars that grow in when the card is revealed).
   .svc-art-core is the orange circle; put an svg inside or leave it plain. */

.svc-art{
  position:relative;
  height:170px;
  display:grid;
  place-items:center;
  background:radial-gradient(circle, rgba(255,77,22,.09), transparent 60%);
}
.svc-art > *{position:relative}

/* shared pieces */
.svc-art-win{
  width:150px;
  padding:14px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  background:linear-gradient(145deg, #111, #070707);
  box-shadow:0 25px 55px rgba(0,0,0,.35);
}
.svc-art-bars i{display:block;height:6px;margin-top:9px;border-radius:999px;background:#292929}
.svc-art-bars i.on{width:70%;background:linear-gradient(90deg, var(--orange), #54200f)}
.svc-art-bars i.short{width:48%}
.svc-art-core{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ff6736, #702009);
  box-shadow:0 0 30px rgba(255,77,22,.18);
}
.svc-art-core svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* window */
.svc-art-dots{display:flex;gap:5px;margin-bottom:6px}
.svc-art-dots i{width:6px;height:6px;border-radius:50%;background:#555}
.svc-art-dots i:first-child{background:var(--orange)}

/* hub: core with four nodes around it */
.svc-art-hub{width:170px;height:140px}
.svc-art-hub .svc-art-core{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:1}
.svc-art-hub i{
  position:absolute;
  width:28px;
  height:28px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  background:#171717;
}
.svc-art-hub i:nth-child(1){left:6px;top:8px}
.svc-art-hub i:nth-child(2){right:6px;top:8px}
.svc-art-hub i:nth-child(3){left:6px;bottom:8px}
.svc-art-hub i:nth-child(4){right:6px;bottom:8px}
.svc-art-hub::before,
.svc-art-hub::after{
  content:"";
  position:absolute;
  left:20px;
  right:20px;
  top:50%;
  height:1px;
  background:linear-gradient(90deg, rgba(255,77,22,.5), rgba(255,77,22,.05), rgba(255,77,22,.5));
  rotate:32deg;
}
.svc-art-hub::after{rotate:-32deg}

/* stacked windows */
.svc-art-stack{width:170px;height:130px}
.svc-art-stack .svc-art-win{position:absolute;left:50%;width:128px;height:80px;translate:-50% 0}
.svc-art-stack .svc-art-win:nth-child(1){top:6px;rotate:5deg;opacity:.4;margin-left:10px}
.svc-art-stack .svc-art-win:nth-child(2){top:20px;rotate:-3deg;opacity:.65;margin-left:-8px}
.svc-art-stack .svc-art-win:nth-child(3){top:36px}
.svc-art-stack b{display:block;width:10px;height:10px;border-radius:50%;background:var(--orange)}

/* rings */
.svc-art-rings{width:150px;height:150px;display:grid;place-items:center}
.svc-art-rings i{
  position:absolute;
  left:50%;
  top:50%;
  translate:-50% -50%;
  border:1px solid rgba(255,255,255,.09);
  border-radius:50%;
}
.svc-art-rings i:nth-child(1){width:72px;height:72px}
.svc-art-rings i:nth-child(2){width:110px;height:110px}
.svc-art-rings i:nth-child(3){width:150px;height:150px}
.svc-art-rings .svc-art-core{border-radius:16px}

/* journey points */
.svc-art-journey{width:190px;height:40px}
.svc-art-journey::before{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  top:50%;
  height:1px;
  background:linear-gradient(90deg, rgba(255,77,22,.15), var(--orange), rgba(255,77,22,.15));
}
.svc-art-journey{display:flex;justify-content:space-between;align-items:center}
.svc-art-journey i{
  position:relative;
  width:28px;
  height:28px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  background:#171717;
}
.svc-art-journey i::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:6px;
  height:6px;
  translate:-50% -50%;
  border-radius:50%;
  background:var(--orange);
}

/* bar chart, grows in when the card is revealed */
.svc-art-chart{width:150px;height:110px;display:flex;align-items:flex-end;justify-content:center;gap:10px}
.svc-art-chart i{
  width:24px;
  border-radius:7px 7px 2px 2px;
  background:linear-gradient(to top, #261006, var(--orange));
  transform:scaleY(.25);
  transform-origin:bottom;
  transition:transform .8s var(--ease);
}
.svc-art-chart i:nth-child(1){height:44%}
.svc-art-chart i:nth-child(2){height:68%;transition-delay:.1s}
.svc-art-chart i:nth-child(3){height:92%;transition-delay:.2s}
.svc-art-chart i:nth-child(4){height:76%;transition-delay:.3s}
.is-in .svc-art-chart i{transform:none}


/* ---------- 15. TABS AS A ROW ---------- */
/* Same tabs as section 12, laid out as a row of pills above the panels.
   Wrap the tab list and panels in <div class="svc-tabs-row">. */

.svc-tabs-row .svc-tabs-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:30px;
  padding:0;
  border:0;
}
.svc-tabs-row .svc-tab{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:auto;
  padding:10px 16px;
  border:1px solid var(--line);
  border-radius:999px;
  font-family:var(--font-body);
  font-size:13px;
  font-weight:500;
  letter-spacing:0;
}
.svc-tabs-row .svc-tab:last-child{border-bottom:1px solid var(--line)}
.svc-tabs-row .svc-tab[aria-selected="true"]{padding-left:16px;border-color:rgba(255,77,22,.5)}
.svc-tabs-row .svc-tab::before,
.svc-tabs-row .svc-tab::after{display:none}
.svc-tabs-row .svc-tab-panel{padding:0}

@media (max-width:700px){
  .svc-tabs-row .svc-tabs-list{flex-wrap:nowrap}
  .svc-tabs-row .svc-tab .svc-mono{display:none}
}


/* ---------- 16. ACCORDION ---------- */
/* One item open at a time. Markup per item:
   .svc-acc-item > h3 > button.svc-acc-btn (mono number, .svc-acc-title, .svc-acc-icon)
   then .svc-acc-panel > .svc-acc-inner > .svc-acc-body (text left, list/tags right).
   Add .is-open to the item that starts open. service.js runs it. */

.svc-acc{border-bottom:1px solid var(--line)}
.svc-acc-item{border-top:1px solid var(--line);transition:border-color .3s ease}
.svc-acc-item.is-open{border-top-color:rgba(255,77,22,.45)}

.svc-acc-btn{
  width:100%;
  display:grid;
  grid-template-columns:42px 1fr 34px;
  gap:16px;
  align-items:center;
  padding:30px 0;
  border:0;
  background:none;
  color:#cfcfcf;
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:padding-left .3s ease, color .3s ease;
}
.svc-acc-btn:hover,
.is-open .svc-acc-btn{padding-left:12px;color:#fff}
.svc-acc-btn .svc-mono{color:#444;transition:color .3s ease}
.svc-acc-btn:hover .svc-mono,
.is-open .svc-acc-btn .svc-mono{color:var(--orange)}

.svc-acc-title{
  font-family:var(--font-display);
  font-size:clamp(24px, 2.9vw, 38px);
  font-weight:600;
  line-height:1;
  letter-spacing:-.045em;
}

.svc-acc-icon{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  color:#666;
  font-size:16px;
  transition:transform .3s ease, color .3s ease, border-color .3s ease;
}
.svc-acc-icon::before{content:"+"}
.is-open .svc-acc-icon{transform:rotate(45deg);color:var(--orange);border-color:rgba(255,77,22,.45)}

/* height animates via grid rows, so the panel can be any length */
.svc-acc-panel{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .45s var(--ease);
}
.is-open .svc-acc-panel{grid-template-rows:1fr}
.svc-acc-inner{min-height:0;overflow:hidden}

.svc-acc-body{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(200px,.9fr);
  gap:40px;
  padding:0 0 32px 70px;
}
.svc-acc-body p{color:var(--dim);font-size:14px;line-height:1.75}
.svc-acc-body p strong{color:#cfcfcf;font-weight:500}
.svc-acc-body .svc-tags{margin-top:0;align-content:flex-start}

@media (max-width:700px){
  .svc-acc-btn{grid-template-columns:28px 1fr 30px;gap:10px;padding:24px 0}
  .svc-acc-btn:hover,
  .is-open .svc-acc-btn{padding-left:0}
  .svc-acc-icon{width:30px;height:30px}
  .svc-acc-body{grid-template-columns:1fr;gap:18px;padding:0 0 26px 38px}
}


/* ---------- 17. ORANGE BLOCK ---------- */
/* Add .svc-orange to a section or card to flip it to the brand orange.
   Labels, titles, ledes and inline CTAs inside switch to white/black.
   Use .svc-btn--dark for the button. */

.svc-orange{background:var(--orange);color:#fff}
.svc-orange .svc-label{color:#fff}
.svc-orange .svc-label::before,
.svc-orange .svc-label--center::after{background:#fff}
.svc-orange .svc-title span{color:#1c0e08}
.svc-orange .svc-lede{color:rgba(255,255,255,.88)}
.svc-orange .svc-lede strong{color:#fff}
.svc-orange .svc-inline-cta{border-top-color:rgba(255,255,255,.25);color:rgba(255,255,255,.85)}
.svc-btn--dark{background:#0a0a0a;color:#fff}
.svc-btn--dark:hover{transform:translateY(-2px);background:#1a1a1a}


/* ---------- 18. PROBLEM CARDS (dark cards for an orange band) ---------- */
/* .svc-pains list of .svc-pain cards, each with an icon, number,
   title, text and a small chart (.svc-pain-viz) that draws in.
   .svc-answer is the centered closing block under them. */

.svc-pains{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  margin:0;
  padding:0;
  list-style:none;
}
.svc-pain{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:22px 22px 18px;
  overflow:hidden;
  border:1px solid rgba(255,135,80,.2);
  border-radius:18px;
  background:#150c07;
  box-shadow:0 24px 50px rgba(70,18,2,.3);
}
.svc-pain::after{
  content:"";
  position:absolute;
  left:22px;
  top:0;
  width:58px;
  height:2px;
  background:#ff8750;
}
.svc-pain-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.svc-pain .svc-icon{width:44px;height:44px;border-radius:14px;color:#ff8750;border-color:rgba(255,135,80,.25);background:rgba(255,77,22,.08)}
.svc-pain .svc-icon svg{width:19px;height:19px}
.svc-pain-top .svc-mono{color:#ff8750}
.svc-pain h3{
  margin-bottom:9px;
  color:#fff2ea;
  font-size:24px;
  line-height:1.06;
  font-weight:600;
  letter-spacing:-.045em;
}
.svc-pain h3 span{color:#8a6250}
.svc-pain p{color:#b08b77;font-size:13px;line-height:1.6}

.svc-pain-viz{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid rgba(255,135,80,.12);
}
.svc-pain-viz svg{width:112px;height:32px;flex:none;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.svc-pain-viz .dim{stroke:rgba(169,131,110,.4)}
.svc-pain-viz .dimfill{fill:rgba(169,131,110,.35);stroke:none}
.svc-pain-viz .hot{stroke:#ff8750;stroke-dasharray:220;stroke-dashoffset:220;transition:stroke-dashoffset 1s var(--ease) .3s}
.svc-pain-viz .hotfill{fill:#ff8750;stroke:none}
.svc-pain.is-in .hot{stroke-dashoffset:0}
.svc-pain-viz span{color:#8a6250;font-size:9px;line-height:1.5;text-align:right;text-transform:uppercase}
.svc-pain-viz b{display:block;color:#ff8750;font-weight:500}
.svc-pain p{margin-bottom:16px}

.svc-answer{max-width:860px;margin:70px auto 0}
.svc-answer .svc-title{font-size:clamp(34px, 4.6vw, 64px)}
.svc-answer .svc-lede{margin:20px auto 28px;max-width:580px}


/* ---------- 19. COMPARISON TABLE ---------- */
/* .svc-diff intro box, then .svc-compare with .svc-compare-row rows
   (heading cell + two columns, the HumanBots column marked .is-hb),
   .svc-compare-group dividers and an optional .svc-compare-row--final.
   .svc-mark draws a tick (.good) or a cross. */

.svc-diff{
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:50px;
  margin-bottom:40px;
  padding:30px 32px;
  border:1px solid var(--line);
  border-radius:18px;
  background:radial-gradient(circle at 90% 0%, rgba(255,77,22,.07), transparent 35%), var(--card);
}
.svc-diff p{color:#888;font-size:15px;line-height:1.75}
.svc-diff strong{color:#eee;font-weight:500}

.svc-compare{overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#040404}

.svc-compare-row{
  display:grid;
  grid-template-columns:280px 1fr 1fr;
  border-bottom:1px solid var(--soft-line);
}
.svc-compare-row:last-child{border-bottom:0}
.svc-compare-row > *{padding:22px 26px;border-right:1px solid var(--soft-line)}
.svc-compare-row > *:last-child{border-right:0}
.svc-compare-row h4{margin:0;color:#ddd;font-size:15px;font-weight:500;line-height:1.35}
.svc-compare-row h4 small{display:block;margin-top:6px;color:#666;font-size:12px;font-weight:400}
.svc-compare-row p{margin:0;color:#7a7a7a;font-size:14px;line-height:1.65}
.svc-compare-row p strong{color:#aaa;font-weight:500}
.svc-compare-row .is-hb{background:linear-gradient(180deg, rgba(255,77,22,.03), transparent)}
.svc-compare-row .is-hb p{color:#b4b4b4}
.svc-compare-row .is-hb p strong{color:#fff}

/* column heads */
.svc-compare-row--head{background:#080808}
.svc-compare-row--head > div{display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.svc-compare-row--head strong{color:#999;font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:-.03em}
.svc-compare-row--head .is-hb{background:radial-gradient(circle at 30% 0%, rgba(255,77,22,.14), transparent 65%)}
.svc-compare-row--head .is-hb strong{color:#fff}
.svc-compare-row--head .svc-mono{color:#555;text-transform:uppercase}
.svc-compare-row--head .is-hb .svc-mono{color:var(--orange)}
.svc-compare-row--head p{font-size:12px}

/* small label inside each cell, shown on phones only */
.svc-compare-who{display:none;margin-bottom:8px;color:#555;text-transform:uppercase}
.is-hb .svc-compare-who{color:var(--orange)}

.svc-compare-group{
  display:flex;
  align-items:center;
  gap:11px;
  padding:18px 26px;
  border-bottom:1px solid var(--soft-line);
  background:#0a0a0a;
  color:#e4e4e4;
  font-size:15px;
  font-weight:500;
}
.svc-compare-group::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);box-shadow:0 0 8px rgba(255,77,22,.5)}

.svc-compare-row--final{background:radial-gradient(circle at 82% 50%, rgba(255,77,22,.1), transparent 43%)}
.svc-compare-row--final h4{color:var(--orange)}


/* ---------- 20. QUOTE, CAPABILITY CARDS, 4-STEP STRIP ---------- */

.svc-quote{
  max-width:960px;
  margin:0 auto 60px;
  padding-top:40px;
  border-top:1px solid var(--soft-line);
  color:#efefef;
  font-family:var(--font-display);
  font-size:clamp(22px, 2.5vw, 34px);
  font-weight:500;
  line-height:1.25;
  letter-spacing:-.035em;
  text-align:center;
}
.svc-quote::before{content:"\201C";display:block;color:var(--orange);font-family:Georgia, serif;font-size:60px;line-height:.6;margin-bottom:12px}
.svc-quote span{color:#555}

.svc-help{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
  margin:0;
  padding:0;
  list-style:none;
}
.svc-help li{
  display:flex;
  flex-direction:column;
  min-height:200px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(145deg, rgba(255,255,255,.025), rgba(255,255,255,.008));
  transition:border-color .3s ease;
}
.svc-help li:hover{border-color:rgba(255,77,22,.35)}
.svc-help .svc-mono{display:flex;align-items:center;gap:7px;color:#666;font-size:10px;text-transform:uppercase}
.svc-help .svc-mono::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--orange)}
.svc-help h3{margin:14px 0 8px;color:#e5e5e5;font-size:17px;font-weight:500;letter-spacing:-.02em}
.svc-help p{color:#777;font-size:13px;line-height:1.6}

.svc-loop{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  margin:40px 0 0;
  padding:40px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.svc-loop div{
  display:flex;
  flex-direction:column-reverse;
  justify-content:flex-end;
  padding:0 20px;
  text-align:center;
}
.svc-loop div + div{border-left:1px solid var(--soft-line)}
.svc-loop dd{
  margin:0 0 12px;
  color:#f3f3f1;
  font-family:var(--font-display);
  font-size:clamp(24px, 2.6vw, 36px);
  font-weight:600;
  letter-spacing:-.04em;
}
.svc-loop dd span{color:var(--orange)}
.svc-loop dt{max-width:200px;margin:0 auto;color:#777;font-size:13px;line-height:1.5}

/* tick / cross inside a comparison cell */
.svc-mark{
  width:28px;
  height:28px;
  display:inline-grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  background:#0c0c0c;
  color:#666;
}
.svc-mark::before{content:"\2715";font-size:11px}
.svc-mark.good{color:var(--orange);border-color:rgba(255,77,22,.25);background:rgba(255,77,22,.05)}
.svc-mark.good::before{content:"\2713";font-size:13px}

/* two-column version of the card grid */
.svc-grid--2{grid-template-columns:repeat(2, 1fr)}

@media (max-width:1100px){
  .svc-help{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width:950px){
  .svc-pains{grid-template-columns:repeat(2, 1fr)}
  .svc-diff{grid-template-columns:1fr;gap:14px}
  .svc-compare-row{grid-template-columns:200px 1fr 1fr}
  .svc-compare-row > *{padding:18px}
  .svc-loop{grid-template-columns:repeat(2, 1fr);gap:30px 0}
  .svc-loop div:nth-child(3){border-left:0}
}
@media (max-width:700px){
  .svc-pains{grid-template-columns:1fr}
  .svc-compare{border-radius:14px}
  .svc-compare-row{grid-template-columns:1fr 1fr}
  .svc-compare-row > h4,
  .svc-compare-row > div:first-child{grid-column:1 / -1;border-right:0;border-bottom:1px solid var(--soft-line)}
  .svc-compare-row > *{padding:14px}
  .svc-compare-row p{font-size:12px}
  .svc-compare-row--head > div:first-child{display:none}
  .svc-compare-row--head > div{grid-column:auto !important;border-bottom:0 !important}
  .svc-compare-row--head strong{font-size:15px}
  .svc-compare-who{display:block}
  .svc-compare-group{padding:14px}
  .svc-help{grid-template-columns:1fr}
  .svc-help li{min-height:0}
  .svc-loop{grid-template-columns:1fr 1fr;padding:30px 0}
  .svc-loop div{padding:0 10px}
}
@media (max-width:650px){
  .svc-grid--2{grid-template-columns:1fr}
}
/* QA: process steps and unfilled words remain readable before they animate. */
.svc-word{color:#777}.svc-step{opacity:1}.svc-step-num,.svc-step-tag,.svc-acc-btn>.svc-mono{color:#aaa}.svc-step-body h3{color:#ddd}.svc-step-body p{color:#aaa}

/* Readable shared secondary labels and inactive tabs. */
.svc-split-note,.svc-acc-body .svc-tags span{color:#aaa}
.svc-tab{color:#999}
.svc-tab .svc-mono{color:#999}
.svc-tab-panel .svc-tags span{color:#aaa}