/* ============================================================
   99creatix service page template
   ONE layer shared by all six service pages. Every page carries
   body class "c99 c99-service", so this file is built once and
   never duplicated per page. Only post_content differs.
   Selectors are doubled (.c99.c99-service) so they outrank the
   homepage's .c99 rules, which print later in the site custom CSS.

   Two shared rules are deliberately overridden here:
   .c99 .band (site default padding is larger) and .c99 .crumb
   (the site default sits on paper; here it sits in the dark stage).
   ============================================================ */

.c99.c99-service [id] { scroll-margin-top: 92px; }

/* ---- type sizes for this template ---- */
.c99.c99-service .display { font-size: clamp(2.1rem, 6vw, 4.6rem); line-height: 0.92; letter-spacing: -0.045em; }
.c99.c99-service .h2 { font-size: clamp(1.6rem, 3.8vw, 2.7rem); line-height: 1; letter-spacing: -0.035em; }

/* ---- breadcrumb, in the dark stage under the nav ---- */
.c99.c99-service .crumb {
  padding-top: 1.4rem; margin: 0;
  font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--panel-mute);
}
.c99.c99-service .opening .crumb a { color: var(--panel-mute); text-decoration: none; }
.c99.c99-service .opening .crumb a:hover { color: var(--panel-ink); }
.c99.c99-service .crumb span { color: var(--blue-l); }

/* ---- hero ---- */
.c99.c99-service .opening .hero { padding-block: clamp(1.6rem, 4vw, 2.6rem) clamp(2rem, 4vw, 3rem); }
.c99.c99-service .hero h1 { margin-bottom: 1.3rem; max-width: 20ch; }
.c99.c99-service .hero__sub {
  max-width: 56ch; font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--panel-mute); margin: 0 0 clamp(2rem, 4vw, 3rem); line-height: 1.55;
}
.c99.c99-service .figs > div { padding: 1.3rem 1.25rem 1.5rem 0; }
.c99.c99-service .figs > div + div { padding-left: 1.25rem; }
.c99.c99-service .figs b { font-size: clamp(1.4rem, 3vw, 2.2rem); margin-bottom: 0.5rem; }
.c99.c99-service .figs span { font-size: 0.6rem; }

/* ============ THE SHORT ANSWER ============
   The extractable block. Written to be quoted whole by ChatGPT,
   Perplexity, Copilot and Google AI Overviews, and by featured
   snippets. The teal left edge marks it as the answer; it must not
   be shortened, split or reworded. */
.c99.c99-service .answer { padding-block: 0 clamp(3rem, 6vw, 4.5rem); }
.c99.c99-service .answer__box {
  border: 1px solid var(--panel-rule); border-left: 3px solid var(--teal);
  background: rgba(20,22,26,0.55);
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2.2rem);
  max-width: 860px;
}
.c99.c99-service .answer__k {
  display: block; font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--teal); margin-bottom: 0.9rem;
}
.c99.c99-service .answer__box p { margin: 0; color: var(--panel-ink); font-size: clamp(1rem, 1.7vw, 1.18rem); line-height: 1.65; }
.c99.c99-service .answer__box p + p { margin-top: 0.8rem; color: var(--panel-mute); font-size: 0.95rem; }
.c99.c99-service .answer__box a { color: var(--teal); text-decoration: none; border-bottom: 1px solid rgba(53,214,190,0.4); }
.c99.c99-service .answer__box a:hover { border-bottom-color: var(--teal); }

/* ---- band rhythm for this template ---- */
.c99.c99-service .band { padding-block: clamp(3rem, 6vw, 4.5rem); }
.c99.c99-service .band--tight { padding-top: 0; }
.c99.c99-service .band__head { margin-bottom: clamp(1.8rem, 4vw, 2.6rem); max-width: 64ch; }
.c99.c99-service .band__head .tag { display: block; margin-bottom: 1rem; }
.c99.c99-service .band__head p { color: var(--ink-mute); margin: 1.1rem 0 0; font-size: clamp(0.98rem, 1.5vw, 1.08rem); }

/* ============ what is included: dotted ledger with explanations ============ */
.c99.c99-service .inc { border-top: 1px solid var(--ink); }
.c99.c99-service .inc__row { padding: 1.25rem 0 1.35rem; border-bottom: 1px solid var(--rule); }
.c99.c99-service .inc__line { display: flex; align-items: baseline; gap: 0.45rem; font-family: var(--mono); font-size: 0.78rem; }
.c99.c99-service .inc__line .item { color: var(--ink); font-weight: 500; }
.c99.c99-service .inc__line .lead { flex: 1; border-bottom: 1px dotted var(--rule); transform: translateY(-3px); min-width: 0.75rem; }
.c99.c99-service .inc__line .val { color: var(--blue); white-space: nowrap; }
.c99.c99-service .inc__row p { margin: 0.6rem 0 0; color: var(--ink-mute); font-size: 0.95rem; line-height: 1.6; max-width: 68ch; }
.c99.c99-service .inc__row p a { color: var(--blue); text-decoration: none; border-bottom: 1px solid var(--rule); }
.c99.c99-service .inc__row p a:hover { border-bottom-color: var(--blue); }

/* ============ how it runs: 3 steps in one bordered run ============ */
.c99.c99-service .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.c99.c99-service .steps > div { background: var(--paper); padding: 1.5rem 1.5rem 1.6rem; }
.c99.c99-service .steps .k {
  display: block; font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--blue); margin-bottom: 0.85rem;
}
.c99.c99-service .steps h3 { font-size: 1.1rem; letter-spacing: -0.025em; text-transform: uppercase; margin-bottom: 0.5rem; font-weight: 700; }
.c99.c99-service .steps p { margin: 0; font-size: 0.9rem; color: var(--ink-mute); line-height: 1.58; }
@media (max-width: 820px) { .c99.c99-service .steps { grid-template-columns: 1fr; } }

/* ============ proof + cost, one bordered object ============ */
.c99.c99-service .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--ink); }
.c99.c99-service .duo > div { background: var(--paper); padding: clamp(1.5rem, 3vw, 2rem); }
.c99.c99-service .duo .k {
  display: block; font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 1rem;
}
.c99.c99-service .duo .big {
  font-family: var(--mono); font-weight: 500; font-size: clamp(2.2rem, 5vw, 3.4rem);
  letter-spacing: -0.05em; line-height: 1; color: var(--blue); font-variant-numeric: tabular-nums;
}
/* #12907c is the accessible teal for text on paper. The brand --teal
   (#35D6BE) is for dark grounds only and fails contrast here. */
.c99.c99-service .duo .big.teal { color: #12907c; }
.c99.c99-service .duo p { margin: 0.9rem 0 0; color: var(--ink-mute); font-size: 0.95rem; line-height: 1.6; }
.c99.c99-service .duo .who { font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.06em; color: var(--ink-soft); margin-top: 0.7rem; display: block; }
.c99.c99-service .duo a.more {
  display: inline-block; margin-top: 1.1rem; font-family: var(--mono);
  font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--blue); text-decoration: none; border-bottom: 1px solid var(--blue); padding-bottom: 2px;
}
.c99.c99-service .duo a.more:hover { color: var(--ink); border-color: var(--ink); }
@media (max-width: 760px) { .c99.c99-service .duo { grid-template-columns: 1fr; } }

/* ============ FAQ ============ */
.c99.c99-service .faq { border-top: 1px solid var(--ink); }
.c99.c99-service .faq details { border-bottom: 1px solid var(--rule); }
.c99.c99-service .faq summary {
  cursor: pointer; list-style: none; display: flex; align-items: baseline;
  justify-content: space-between; gap: 1.5rem; padding: 1.25rem 0;
  font-weight: 700; font-size: 1.02rem; letter-spacing: -0.02em;
}
.c99.c99-service .faq summary::-webkit-details-marker { display: none; }
.c99.c99-service .faq summary::after {
  content: "+"; font-family: var(--mono); color: var(--blue);
  font-weight: 500; font-size: 1.1rem; flex-shrink: 0;
}
.c99.c99-service .faq details[open] summary::after { content: "\2212"; }
.c99.c99-service .faq .a { padding: 0 0 1.35rem; max-width: 68ch; color: var(--ink-mute); font-size: 0.97rem; margin: 0; line-height: 1.65; }
.c99.c99-service .faq .a a { color: var(--blue); text-decoration: none; border-bottom: 1px solid var(--rule); }
.c99.c99-service .faq .a a:hover { border-color: var(--blue); }

/* ============ works alongside: cluster linking ============ */
.c99.c99-service .rel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.c99.c99-service .rel a { background: var(--paper); padding: 1.35rem 1.4rem 1.5rem; text-decoration: none; color: inherit; display: block; transition: background .18s ease; }
.c99.c99-service .rel a:hover { background: var(--paper-2); }
.c99.c99-service .rel .k {
  display: block; font-family: var(--mono); font-size: 0.58rem;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.6rem;
}
.c99.c99-service .rel b { display: block; font-size: 1rem; letter-spacing: -0.025em; margin-bottom: 0.35rem; font-weight: 700; }
.c99.c99-service .rel p { margin: 0; font-size: 0.86rem; color: var(--ink-mute); line-height: 1.5; }
@media (max-width: 820px) { .c99.c99-service .rel { grid-template-columns: 1fr; } }

/* ============ closer ============ */
.c99.c99-service .closer { padding-block: clamp(3.5rem, 8vw, 6rem) clamp(3rem, 6vw, 4.5rem); }
.c99.c99-service .closer .tag { display: block; margin-bottom: 1.4rem; }
.c99.c99-service .closer h2 { margin-bottom: 1.5rem; }
.c99.c99-service .closer p { max-width: 48ch; }
.c99.c99-service .closer .btn--ghost { border-color: rgba(237,237,234,0.34); }
.c99.c99-service .closer .btn--ghost:hover { border-color: var(--panel-ink); }
/* Pin the trailing line of each duo cell to the cell floor, so the proof
   link and the price link align across the pair however many lines the
   paragraphs above them run to. Same discipline as .card__foot on the hub.
   align-self keeps .more from being stretched to the full column width by
   the flex container, which would run its underline across the whole cell. */
.c99.c99-service .duo > div { display: flex; flex-direction: column; }
.c99.c99-service .duo .who,
.c99.c99-service .duo a.more { margin-top: auto; }
.c99.c99-service .duo .who { padding-top: 0.7rem; }
.c99.c99-service .duo a.more { align-self: flex-start; padding-top: 1.1rem; }