/* ============================================================
   SERVICES.CSS — the detailed services and pricing page.
   Loads after site.css.
   ============================================================ */

/* ---------- HERO ---------- */
.s-hero { padding:58px 0 46px; position:relative; overflow:hidden; }
.s-hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(720px 400px at 80% 2%, rgba(232,130,61,.14), transparent 62%),
             radial-gradient(560px 420px at 2% 96%, rgba(61,110,119,.20), transparent 60%);
}
.s-hero .inner { position:relative; }
.s-hero h1 {
  font-family:'Anton','Arial Narrow',sans-serif; font-weight:400;
  font-size:clamp(2.2rem,5.2vw,3.6rem); line-height:1.03;
  text-transform:uppercase; margin:14px 0 18px; max-width:20ch;
}
.s-hero h1 span { color:var(--amber); }
.s-hero .lede { color:#CFC7B8; font-size:1.06rem; max-width:62ch; }
.s-hero .actions { display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }

/* ---------- SERVICE BLOCKS ---------- */
.svc-block {
  display:grid; grid-template-columns:270px 1fr; gap:48px;
  padding:44px 0; border-top:1px solid var(--line); align-items:start;
}
.svc-block:first-of-type { border-top:0; padding-top:12px; }
.svc-side h2 {
  font-family:'Anton','Arial Narrow',sans-serif; font-weight:400;
  font-size:1.75rem; text-transform:uppercase; line-height:1.08; margin:10px 0 12px;
}
.svc-side .from {
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.92rem; color:var(--amber); margin-top:14px;
  padding-top:14px; border-top:1px solid var(--line);
}
.svc-side .from small {
  display:block; color:var(--muted); font-size:.7rem;
  letter-spacing:.08em; margin-top:5px;
}
.svc-main p { color:#CFC7B8; margin-bottom:18px; max-width:66ch; }

.deliver { display:grid; grid-template-columns:repeat(2,1fr); gap:10px 26px; margin-top:20px; }
.deliver h4 {
  grid-column:1/-1;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.62rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  margin-bottom:2px;
}
.deliver li {
  list-style:none; font-size:.91rem; color:#CFC7B8;
  padding-left:20px; position:relative;
}
.deliver li::before { content:'✓'; position:absolute; left:0; color:var(--amber); font-size:.78rem; }

.not-included {
  margin-top:22px; padding:14px 18px;
  border:1px dashed var(--line); border-radius:10px;
  color:var(--muted); font-size:.87rem; max-width:66ch;
}
.not-included strong { color:#CFC7B8; }

/* ---------- TIERS ---------- */
.tiers { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.tier {
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 26px; display:flex; flex-direction:column; position:relative;
}
.tier.featured { border-color:var(--amber); }
.tier .flag {
  position:absolute; top:-11px; left:26px; background:var(--amber); color:#16140F;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase; padding:4px 12px; border-radius:999px;
}
.tier h3 { font-size:1.15rem; margin-bottom:6px; }
.tier .amount {
  font-family:'Anton','Arial Narrow',sans-serif; font-weight:400;
  font-size:1.9rem; margin:14px 0 4px;
}
.tier .who { color:var(--muted); font-size:.87rem; min-height:48px; }
.tier ul { list-style:none; margin:20px 0 22px; flex:1; }
.tier li { font-size:.88rem; color:#CFC7B8; padding-left:22px; position:relative; margin:9px 0; }
.tier li::before { content:'✓'; position:absolute; left:0; color:var(--amber); font-size:.8rem; }
.tier .timeline {
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  padding-top:14px; border-top:1px solid var(--line); margin-bottom:18px;
}
.tier .btn { width:100%; justify-content:center; }

/* ---------- WHAT MOVES THE PRICE ---------- */
.movers { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:8px; }
.mover {
  background:var(--panel); border:1px solid var(--line);
  border-left:3px solid var(--teal); border-radius:10px; padding:20px 22px;
}
.mover h3 { font-size:.98rem; margin-bottom:7px; }
.mover p { color:var(--muted); font-size:.88rem; }

/* ---------- PROCESS ---------- */
.proc { display:grid; gap:0; counter-reset:step; }
.proc-step {
  display:grid; grid-template-columns:86px 1fr; gap:30px;
  padding:26px 0; border-top:1px solid var(--line); align-items:start;
}
.proc-step:first-child { border-top:0; }
.proc-step .num {
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:1.5rem; color:var(--amber);
}
.proc-step h3 { font-size:1.08rem; margin-bottom:8px; }
.proc-step p { color:#CFC7B8; font-size:.93rem; max-width:64ch; }
.proc-step .you {
  margin-top:10px; font-size:.85rem; color:var(--muted);
}
.proc-step .you b { color:var(--amber); font-weight:600; }

/* ---------- FAQ ---------- */
.faq { display:grid; gap:12px; max-width:860px; }
.faq details {
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  transition:border-color .2s ease;
}
.faq details[open] { border-color:var(--amber); }
.faq summary {
  cursor:pointer; padding:18px 22px; font-weight:600; font-size:.98rem;
  list-style:none; display:flex; justify-content:space-between; gap:18px; align-items:center;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after {
  content:'+'; color:var(--amber); font-size:1.3rem; line-height:1; flex-shrink:0;
  transition:transform .2s ease;
}
.faq details[open] summary::after { content:'–'; }
.faq .a { padding:0 22px 20px; color:#CFC7B8; font-size:.93rem; }
.faq .a p { margin-bottom:12px; }
.faq .a p:last-child { margin-bottom:0; }

/* ---------- CTA BAND ---------- */
.band { border-top:1px solid var(--line); background:var(--panel); }
.band-inner {
  display:flex; align-items:center; justify-content:space-between;
  gap:30px; flex-wrap:wrap; padding:54px 0;
}
.band h2 {
  font-family:'Anton','Arial Narrow',sans-serif; font-weight:400;
  font-size:clamp(1.6rem,3.4vw,2.2rem); text-transform:uppercase; line-height:1.1;
}
.band p { color:var(--muted); margin-top:10px; max-width:50ch; }
.band-actions { display:flex; gap:14px; flex-wrap:wrap; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:1000px) {
  .svc-block { grid-template-columns:1fr; gap:24px; }
  .tiers { grid-template-columns:1fr; }
  .movers { grid-template-columns:1fr; }
}
@media (max-width:680px) {
  .deliver { grid-template-columns:1fr; }
  .proc-step { grid-template-columns:1fr; gap:10px; }
  .s-hero { padding:34px 0 34px; }
}